Floating layout is not a popular layout, but the classical layout based on floating or often appear in the front-end interview, the Holy Grail layout and the twin wing layout is one of the knowledge points often assessed. Grail layout and twin wings layout are three columns in front of the layout, requiring the main middle content to be rendered first, the left and right content width is fixed, the middle main content width adaptively arranged. The holy cup layout and the twin wing layout do not use absolute positioning, but use float, negative margins and relative positioning of the core knowledge points to achieve.
The holy grail layout
The Holy Grail layout is to have the left and right fixed columns and the adaptive main interior column in the middle enclosed in the same container. The container sets the padding-left and padding-right values, where the padding-left value equals the width of the left column. The padding-right value is equal to the width of the right column (#right), and the width of the middle adaptive column is set to 100% so that the width of the middle adaptive column is equal to the width of the container’s content box. Position the left column (#left) to the left of the center column (# center) so that the right column (# right) to the right of the center column (# center) contains the padding-right space.
The main sketch of the Grail layout is shown below:
Holy Grail layout HTML structure code:
<``div id='header'>#header</``div``>
<``div id='container'>
<``div id='center'>#center</``div``>
<``div id='left'>#left</``div``>
<``div id='right'>#right</``div``>
</``div``>
<``div id='footer'>#footer</``div``>
Holy Grail layout CSS code:
* {
border-width``: 0``;
}
body {
min-width``: 350px``;
}
#header,
#footer {
height``: 100px``;
background``: #ccc``;
}
#container {
padding-left``: 200px``;
padding-right``: 150px``;
box-sizing:border-box;
min-width``:``550px``;
}
#``center {
float``: left``;
width``: 100%``;
background``: #f96d9f``;
}
#``left {
width``: 200px``;
float``: left``;
margin-left``: -100%``;
position``: relative``;
left``: -200px``;
background``: aqua``;
}
#``right {
width``: 150px``;
float``: left``;
margin-right``: -150px``;
background``: yellowgreen;
}
#``left``,
#``right``,
#``center {
min-height``: 100px``;
}
/* Peripheral style */
#header,
#footer,
#``center``,
#``left``,
#``right {
display``: flex;
justify-``content``: center``;
align-items: center``;
font-family``: 'Source Code Pro'``;
font-size``: 20px``;
}
#footer {
clear``: both``;
}
Peripheral styles are code set to center text, not the body of the Holy grail layout CSS code. The core difficulty of the holy cup layout code is how to place the later elements in the document flow in front of the previous element without using absolute positioning, which is achieved by floating, negative margins, and relative positioning.
This is the core code for the left column:
#left {
width: 200px;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
Margin – left here: – 100%; Since negative margin -100% is the width of the host element’s content box model, it is 200px wider than the width of the left column. So the floating left column floats up to the top level with a negative margin, takes the right outer edge of the center column (# Center) as a baseline, and moves to the left by the width of the content box model of the host element, just to the left of the center column (# Center), occupying the position of the #container padding-left.
#``right {
width``: 150px``;
float``: left``;
margin-right``: -150px``;
}
When the left column (#left) moves up due to negative margins, the right column (#right) is located on the inside left edge of the #container due to left float. Margin-right: -150px; Set the #right bar to move up, again touching the leftmost edge of the #right bar with the outer right edge of the #center bar as the baseline.
It is difficult to understand the Holy Grail layout to move the left column (#left) and right column (#right) of the floating element above the middle column (#center) by setting the left and right negative margins of the floating element.
Minimum size problem for grail layout
The Grail layout is based on the negative margin of the left column (#left) margin-left: -100%; If the value of the negative value of the margin-left column plus the width of the #left column itself is not greater than the remaining space of the previous line, the #left column can be moved up. In this case, the #center occupies the rest of the top line, and the negative value of the margin-left column must not be greater than 0 if it is added to the width of the #left column itself. Otherwise, the #left column will remain in the second line and the Holy Grail layout will not be achieved. Therefore, the width of the middle column (#center) needs to be no less than the width of the left column (#left) in order to achieve the Holy Grail layout.
The minimum size of the Grail layout: if the width of the left column is X and the width of the right column is Y, then the minimum size of the #container is 2X+Y.
In the example above, the minimum size of the Grail layout is 2×200+150=550px. Min-width :550px; Box-sizing :border-box; box-sizing:border-box; .
#container {
padding-left``: 200px``;
padding-right``: 150px``;
box-sizing:border-box;
min-width``:``550px``;
}
Twin wing layout
The twin wing layout also does not use absolute positioning, it is an improved layout based on the Grail layout. The left column (#left), right column (#right), and center column (# Center) are all siblings. Use the #center inner element to set the left and right margins to leave space for the #left and #right, and use the negative margin to move the floating elements up.
Schematic diagram of the layout of the twin flying wings:
Double wing layout HTML code:
<div id=``'header'``>#header</div>
<div id=``'center'``>
<div id=``'inner'``>``center``</div>
</div>
<div id=``'left'``>#``left``</div>
<div id=``'right'``>#``right``</div>
<div id=``'footer'``>#footer</div>
Double wing layout CSS code:
* {
border-width``: 0``;
}
body {
min-width``: 350px``;
}
#header,
#footer {
height``: 100px``;
background``: #ccc``;
}
#container {
padding-left``: 200px``;
padding-right``: 150px``;
box-sizing: border-box;
min-width``: 550px``;
}
#``center {
float``: left``;
width``: 100%``;
background``: #f96d9f``;
}
#inner{
margin-left``:``200px``;
margin-right``:``150px``;
}
#``left {
width``: 200px``;
float``: left``;
margin-left``: -100%``;
background``: aqua``;
}
#``right {
width``: 150px``;
float``: left``;
margin-left``: -150px``;
background``: yellowgreen;
}
#``left``,
#``right``,
#``center {
min-height``: 100px``;
}
/* Peripheral style */
#header,
#footer,
#``center``,
#inner,
#``left``,
#``right {
display``: flex;
justify-``content``: center``;
align-items: center``;
font-family``: 'Source Code Pro'``;
font-size``: 20px``;
}
#footer {
clear``: both``;
}
The twin wing layout has no minimum limit compared to the Grail layout and can accommodate a wider range of widths than its layout.