CSS holy cup Layout

This article is similar to the previous article CSS dual flying wing layout. They can be said to be the same in the HTML structure. Style is mainly manifestedFloating + negative margin + Positioning.

In css dual-flying wing layout, in order to remove the left and right sides of the area that blocks the main element, a child element is added to main, it is a good method to use sub-meta to control the width and position of the content to be displayed in main, but in terms of structure, we add an empty tag out of thin air, which is not ideal.

Later I found a proper solution in the Web-Arsenal articleCSS holy cup Layout.

The overall idea is similar to "CSS dual-flying wing layout", but later I didn't add sub-elements to main, but used relative positioning to achieve the effect.

Html

<Div class = "Wrap">

<Div class = "Main"> maindiv>

<Div class = "Left"> left </div>

<Div class = "right"> right </div>

</Div>

 

CSS

. Wrap {Padding: 0 100px 0 120px; overflow; hidden; ZOOM: 1;}

. Main,. Left,. Right {float: Left; Height: 200px ;}

. Main {width: 100%; Background: # Eee ;}

. Left {Width: 120px;Margin-left:-100%; Background: # ace;Position: relative; Left:-120px;}

. Right {Width: 100px;Margin-left:-100px; Background: # F50;Position: relative; Right:-100px;}

 

Analysis: first, the external Div. wrap sets a left and right padding value (This value must be equal to the width of the left and right sides) to fix the div. main range, and then base on the original Div. left Div. set relative positioning for right, and then use the displacement of left and right to control their respective display positions, so that left and right can just fill the gaps between the left and right sides to achieve the effect. However, IE6 does not show satisfactory results. You will find that left is missing ...... In this case, you can rewrite the style of left under IE6 separately:

. Left {left: 100px ;}

 

Note: Left: 100px hereLeft (100px) = width (right) = 100[The width value can be set here, as long as the formula is satisfied]

Don't ask me why. Actually, I don't know who asked IE6 to be raised by stepmother. It's weird. But it is certain that this solution can solve the problem!

 

[It is worth noting that the Holy cup layout takes effect only for elements with fixed pixel values on both sides of the left and right sides, and the percentage is invalid. Because the element width is a percentage, it is calculated based on the width of the parent level. Here, we set the padding value for the parent level (the width is not clear ), if you set the percentage width on both sides of the child, the exact calculation will fail.]

 

For details, refer:

Http://hi.baidu.com/pop123shen/item/2929385d4d4f663594eb053b