The implementation process of the Grail layout

The Grail layout and the double-wing layout, they all require three columns of layout, the middle width is adaptive, both sides are fixed wide, so the advantage is that the important thing placed in front of the document flow can be first rendered, and the double-wing layout is a refinement of the holy Grail layout, the next article will talk about.

Grail layout: Use floating, negative margins, relative positioning, no extra tags added

DOM Structure:

<Divclass= "header">Header</Div><Divclass= "BD">    <Divclass= "Main">Main</Div>    <Divclass= "Left">Left</Div>    <Divclass= "Right"> Right</Div></Div><Divclass= "Footer">Footer</Div>

Style:

<style> Body{padding:0;margin:0}. Header,.footer{width:100%;background:#666;Height:30px;Clear:both;}. BD{Padding-left:150px;Padding-right:190px; }. Left{background:#E79F6D;width:150px;float: Left;Margin-left:-100%;position:relative; Left:-150px; }. Main{background:#D6D6D6;width:100%;float: Left; }. Right{background:#77BBDD;width:190px;float: Left;Margin-left:-190px;position:relative; Right:-190px; }</style>

Left middle right part style change process

1, the middle part needs to change according to the width of the browser, so to use 100%, here set left and right to the left floating, because the middle 100%, the left and right layer there is no position up

. Left{background:#E79F6D;width:150px;float: Left; }. Main{background:#D6D6D6;width:100%;float: Left; }. Right{background:#77BBDD;width:190px;float: Left; }

2, the left side of the negative margin150, found to go up, because the negative to the window has no position, can only move up

. Left {            background: #E79F6D;             width:150px;             float:left;             margin-left:-150px;        }

3, then the second step of this method, you can find it as long as the width of the window can be moved to the far left, using negative margins, the left and right column positioning

        .Left {            background: #E79F6D;             Width:150px;             float:left;             margin-left:-100%;        }         .Right {            background: #77BBDD;             Width:190px;             float:left;             margin-left:-190px;        }

4, however, the problem came, the middle was blocked, ah, had to add padding to the outer layer

       . BD{            padding-left:150px;             Padding-right:190px;        }

5, but after the addition of the left and right column also shrunk in, so the use of relative positioning method, each relative to their own move out, to get the final result

. Left{background:#E79F6D;width:150px;float: Left;Margin-left:-100%;position:relative; Left:-150px; }. Right{background:#77BBDD;width:190px;float: Left;Margin-left:-190px;position:relative; Right:-190px; }

Related articles:

Comparison of the two-wing layout and the Grail layout

The implementation process of the Grail layout