Full parsing of three-row Grail layout scheme with CSS

The Holy Grail layout is beautiful and the browser compatibility requirements are very low, is a very powerful three-column page layout scheme, then take a look at the CSS of the three-column "Holy Grail Layout" solution fully resolved:

The Grail layout originates from Matthew Levine in an article in 06 with the following DOM structure:

<p class= "Container" >    <p class= "main" ></p> <p class= "Sub" ></p> <p class= "Extra" ></p></p>

Process Commentary
Next, let us step-by-step to achieve the Holy Grail layout;

1, first floating main, sub, extra three columns, and then use a negative margin to the sub column and extra column to the left and right sides. At this point the CSS code is as follows:

. main {    float:left;    width:100%;    height:300px;    Background-color:rgba (255, 0, 0,. 5);   Sub {    float:left;    width:200px;    height:300px;    Margin-left: -100%;    Background-color:rgba (0, 255, 0,. 5);   }   . Extra {    float:left;    width:180px;    height:300px;    Margin-left: -180px;    Background-color:rgba (0, 0, 255,. 5);   

2. After completing the step, sub and extra columns have reached the correct position, but sub and extra columns cover both sides of main, for this problem, the solution to the Grail layout is to add the left and right padding to the container container, so that the main column is positioned to the correct position.

. container {    padding-left:210px;    padding-right:190px;   }

3. After completing the second step, there is a new problem: Sub, extra column is also affected by the container left and right inside the position of the location of the movement. To solve this problem, the Grail layout uses relative positioning to bring the sub, extra columns back to the correct position. The newly added code is as follows:

. sub {    position:relative;    Left: -210px;   }   . Extra {    position:relative;    Rightright: -190px;   }

4, when the browser shrinks to a certain extent, this layout may be destroyed, you can add the Min-width property on the body to solve. The final Grail layout CSS code is as follows:

body {    min-width:600px;/* 2*sub + extra */}   . container {    padding-left:210px;    padding-right:190px;   }   . Main {    float:left;    width:100%;    height:300px;    Background-color:rgba (255, 0, 0,. 5);   Sub {    position:relative;    Left: -210px;    Float:left;    width:200px;    height:300px;    Margin-left: -100%;    Background-color:rgba (0, 255, 0,. 5);   }   . Extra {    position:relative;    Rightright: -190px;    Float:left;    width:180px;    height:300px;    Margin-left: -180px;    Background-color:rgba (0, 0, 255,. 5);   

Full instance

The effect is as follows:

The CSS and DOM codes are as follows:

<! DOCTYPE html> 

The benefits of the Grail layout are summarized as follows:
1. Make the main content column load first.
2. Allow any column to be the highest.
3. No additional p.
4. Few hack are needed.