CSS Holy Grail Layout

The two classic layouts of the front end must be well understood-the Grail layout and the double-wing layout, as it embodies both the HTML structure and your mastery of the div+css layout.

In fact, the Holy Grail layout is actually one thing with the double-wing layout. They are all three-column layout, the box width fixed on both sides, the middle box adaptive, that is, we often say the fixed-ratio fixed layout. The effect they achieve is the same, the difference lies in the idea of its realization.

By zooming the page, it can be found that as the width of the page changes, the three columns layout is the middle box priority rendering, the boxes on both sides of the box is fixed, even if the width of the page is smaller, it does not affect our browsing.注意：当你缩放页面的时候，宽度不能小于700PX，为了安全起见，最好还是给body加一个最小宽度!
If you have a little understanding, let's look at the implementation of the Grail layout:

Note: The reset section of the code is self-added

1.HTML structure:

1 <Header>2     <h4>Header content Area</h4>3 </Header>4 <Divclass= "Container">5     <Divclass= "Middle">6         <h4>Intermediate Elastic Zone</h4>7     </Div>8     <Divclass= "Left">9         <h4>Left column</h4>Ten     </Div> One     <Divclass= "Right"> A         <h4>Right column</h4> -     </Div> - </Div> the <Footer> -     <h4>Footer Content Area</h4> - </Footer>                

Some may wonder why the middle body is written in front. Because the middle box is to be rendered first and set its own adaptive, that is, width:100%.

2.CSS Style:

Header{width:100%;
Height:40px;Background-color:#8ecfd4;}. Container{Overflow:Hidden;}. Middle{width:100%;Background-color:#f7f537;float: Left;}. Left{width:200px;Background-color:#37f7c8;float: Left;}. Right{width:200px;Background-color:#eb6100;float: Left;}Footer{width:100%;Height:30px;Background-color:#8ecfd4;}

In this case:

The three columns in the middle are not displayed in a row, and the reason is clear. Three columns are floating up, but the width of the middle column is set to 100%, to the left and right on both sides of the support line display.

Now all we have to do is put the left column on the right side, and put it on the starboard side. Then we need the negative margin of CSS.

3. Using negative margin layouts

Let the left box go up.

. Left {    margin-left:-100%;}

Let's go to the right box.

{    margin-left:-200px;}

At this time,

Achieve solid-ratio fixed layout

Although we seem to have implemented the layout we want now, we will still find the problem when we fill the content in the middle. This step we will also be the middle of the main body to a height, convenient visual effects.

. Middle{width:100%;Height:200px;Background-color:#f7f537;float: Left;}. Left{width:200px;Height:200px;Background-color:#37f7c8;float: Left;}. Right{width:200px;Height:200px;Background-color:#eb6100;float: Left;}

As can be seen from the above, the contents of the middle bar are obscured by the parts of the two sides, this is not what we want, so we have to continue the work.

4. Let the middle Adaptive box safe display (using the parent element to set the value of the left and right padding, the parent of the three sub-boxes into the middle squeeze.) ）

. Container {     padding: 0 200px;}

The 200px here is the width of the left and Right boxes.

The effect is as follows:

Use the inner margin of the parent to squeeze the box toward the middle

We can see that the left and right sides of the padding are there, but the contents of the middle box is still pressed.

5. The left and right sides are separated (to two boxes plus a positioning, add the location after the left and the next two boxes can be set to leave the left and the value. ）

. Left {     position: relative;      Left: -200px;} . Right {    position: relative;     Right: -200px;}

Look at the end

Now our grail layout is OK! We have achieved the effect, the left-right box is fixed, the middle box is self-adapting, and the contents of the middle box are completely unaffected. Hope to be of help to everyone.

CSS Holy Grail Layout