Holy Grail Layout_html/css_WEB-ITnose

The Holy Grail layout is a classic layout, and there is also a double flying wing layout, both of which we need to master.

The goal of the Holy Grail layout is to set the width of the left and right columns, and the row in the middle to flow. The first is the html code (for ease of processing, position-named IDs are used here. In practice, semantic words are used to name IDs):

<div id="header"></div><div id="container">  <div id="center" class="column"></div>  <div id="left" class="column"></div>  <div id="right" class="column"></div></div><div id="footer"></div>

1. The Holy Grail layout requires more mathematical calculations. Here I set the width of the left to be X and the width of the right to be Y. Padding and margin are not considered here.

The first step is to set the container's padding-left to the width of left, and padding-right to the width of right. (The picture comes from a list apart, assuming the left width is 200px and the right width is 150px)

#container{        padding-left:Xpx;        padding-right:Ypx;}

The second step is to set each column Good width.

　For negative margins, put left where it should be, which is to the left of center.

#container .column{        float:left;}#center{        width:100%;}#left{        width:Xpx;}#right{        width:Ypx;}#footer{        clear:both;}

The fourth step is to use relative positioning, distance it from its own position by its width, and move the left layer to the position of padding-left there.

#left{        width:Xpx;        margin-left:-100%;}

The fifth step, move the right layer to the position of padding-right

　

#container .column{        float:left;        position:relative;}#left{        width:Xpx;        margin-left:-100%;        right:Xpx;}    

　The final step is usability modification. Since the middle center layer is streaming, when the window size is reduced to This is a bug below IE6. Negative margin values ​​will fail on IE6 and push the left layer far away. You need to pull it back

Reprinted from: http:// blog.csdn.net/cui_angel/article/details/8306470