) Holy Grail Layout

(Turn) Holy Grail Layout

The holy cup layout is a classic layout, and a dual-flying wing layout, both of which need to be mastered.

The holy cup layout aims to set the width of the left and right columns and the streaming in the middle. The first step is the html code (Here we use the location name ID for easy processing, and the actual operation is still using the semantic word name ID ):

<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>

I. The layout of the holy cup requires a lot of mathematical calculations. Here I set the left width to X and the right width to Y. Padding and margin are not considered here.

Step 1: Set padding-left of iner to left and padding-right to right. (The image is from a list apart. Assume that the left width is 200px and the right width is 150px)

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

Step 2: Set the width of each column.

　　

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

　　

Step 3: Set the negative margin and place left at the expected position, that is, the left side of the center.

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

Step 4: use relative positioning to move the left layer to the position of padding-left by distance from its own location.

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

Step 5: Move the right layer to the position of padding-right.

　　

#right{        width：Ypx;        margin-right:-Ypx;}

The last step is to modify the availability. Because the center layer in the middle is streaming, when the window size is reduced to X + Y, the center is no longer available, so you should set a minimum width for # container.

body{        min-width:(2X+Y)px;}

The next step is to modify the bug below IE6. The negative value of margin on IE6 will fail to get the left layer far away and need to be pulled back.

* html #left {  left: Ypx;}