CSS study notes - the Holy Grail layout and Flying wing

Flying wing Grail layout and are fixed to the left and right width of the intermediate adaptive three-column layout, the main difference lies in the different implementations.

First, the Holy Grail layout

< Div class = "parent" > 
    < div class = "Center" > Center </ div > // DOM structure of the main portion of the display rendering priority EDITORIAL 
    < div class = "left" > left </ div > 
    < div class = "right" > right </ div > 
</ div >

.parent{
    padding: 0 100px;
}
.center,.left,.right{
    height: 100px;
    float: left;
}
.center{
    width: 100%;
    background-color: yellow;
}

.left{
    margin-left: -100%;
    width: 100px;
    background-color: red;
    position: relative;
    left: -100px;
}
.right{
    position: relative;
    right: -100px;
    margin-left: -100px;
    width: 100px;
    background-color: springgreen;
}

Step detailed steps to achieve:

1. The three columns were set left floating it in the same behavior.

2.center main content section disposed width: 100% so it fills the entire line, the left and right portions pushed next line.

3. The left portion is provided on the margin-left: -100%, margin-left flow is based on the document, i.e. negative move forward, because the flow of the document left at the beginning of the second line, any negative values ​​are set to the second mobile line, -100% to move to the beginning of the document flow position. Margin-left also set equal to the negative portion of the width of the right portion of the right, right to make the final portion to the first line.

4. The left-right in the same row has three columns, but since the width center portion is filled with 100% whole line leading to the respective left and right part obscured, the parent element which we set about equal to the width of the padding property, so that center portion reduction of empty position left and right portions.

5. Finally, the relative positioning of the left and right portions disposed, respectively, each offset width, moved into the vacated position to achieve the final effect.

Second, Flying wing

<div class="content">
    <div class="center">
        <div class="center_content">center</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>    

.center,.left,.right{
    height: 100px;
    float: left;
}
.center{
    width: 100%;
    background-color: yellow;
}
.center_content{
    margin: 0 100px;
}
.left{
    margin-left: -100%;
    width: 100px;
    background-color: red;
}
.right{
    margin-left: -100px;
    width: 100px;
    background-color: springgreen;
}

Step detailed steps to achieve:

1. In HTML div extra layer of center section

2. Set three columns left floating it on the same line, respectively.

3.center main content section disposed width: 100% so it fills the entire line, the left and right portions pushed next line.

4. The left portion is provided on the margin-left: -100%, margin-left flow is based on the document, i.e. negative move forward, because the flow of the document left at the beginning of the second line, any negative values ​​are set to the second mobile line, -100% to move to the beginning of the document flow position. Margin-left also set equal to the negative portion of the width of the right portion of the right, right to make the final portion to the first line.

5. Add the internal center div setting margin width equal to the left and right portions, so that the space within the center portion of the left and right positions, to achieve the final effect.

 

Flying wing configuration steps before Grail layout is the same, differences are as follows:

　　Flying wing: interior add an extra div to set margin of its properties

　　Grail layout: parent element disposed padding properties, left and right portions relative positioning offset