【Original】
The first one introduces the Holy Grail layout, which leads to another layout structure with the same effect but a slightly different structure - the double-flying wing layout.
Because the two layout structures are very similar (slightly different), in order not to confuse them and to distinguish them easily, they are not written in one article. Easier to understand and clearer thinking.
Layout ideas:
As mentioned earlier, the holy grail layout is to have three floating child elements Main, Left, and Right in a large div (the three elements are sibling elements). The layout of the double wings is slightly different. The three floating elements of Div, Left, and Right are sibling elements, of which Main is the child element in Div.
The final effect is also fixed width on both sides, adaptive width in the middle and priority rendering of the main part in the middle.
1. Basic structure (same height, left and right column width 200px)
code show as below:
Or put Main in front and render first.
2. Set the floating effect to the three sibling elements
code show as below:
The effect is as follows:
Main is ignored at this point. The div, Left, and Right float respectively. Since the width of the div is 100%, Left and Right are squeezed to the next line.
3. Set Main
code show as below:
The effect is as follows:
Main sets a left and right margin, which are the widths of Left and Right respectively. The width of the middle main body is adaptive (the width of Main does not need to be set at this time, it inherits the width of the parent element).
4. Use the negative value of margin-left to achieve the final effect
code show as below:
The effect is as follows:
Note that the margin-left:-100% here is the margin value from the previous sibling element (ie #div), that is, moving Left to the left by the length of the entire #div , so finally Left moves to the previous line (Left before and after the move is in one column).
Full code:
Summarize
The double-flying wing layout has one less relative positioning than the Holy Grail layout, and the CSS structure is simpler. But the html layout of the Holy Grail may be a little more obvious.
Both are left and right fixed widths, and the middle width is adaptive to the layout structure. The middle main part is rendered first. Both use the negative value of margin-left for positioning.
Both are good methods and should be mastered. When you use it, you can choose the best solution according to the specific problem.