The Holy Grail layout and the double-winged layout

The goal of the Holy Grail layout and the two-wing layout are : fixed width of the left and right columns, adaptive in the middle part;

Holy Grail Layout

Holy Grail layout html:

<div class= "wrap" >  <div class= "main" >    I am the main  </div>  <div class= "left" > I'm on the    left  </div>  <div class= "Right" > I'm on the    side  </div></div>

Holy Grail layout css:

* {    margin:0;    Padding:0}.main {    background-color:yellow;    height:100px;    Float:left;    width:100%;}. Left {    background-color:red;    width:200px;    height:100px;    Float:left;     Margin-left:-100%; /*margin Negative margin *    /position:relative;/* offset relative to itself *    /left: -200px;}. Right {    background-color:blue;    width:200px;    height:100px;    Float:left;    Margin-left: -200px; /*margin negative margin */    position:relative;  /* Offset relative to itself *    /right: -200px;   }. Wrap {    padding:0 200px;  /* Parent Setting padding*/}

advantages of the Holy Grail layout:

Causes the primary content column to load first.
Allows any column to be the highest.
No extra div.
Few hack are needed.

Dual Wing layout

Double winged html

<! DOCTYPE html>
Double winged CSS
. main-wrap {    float:left;    width:100%;}. Main {    height:100px;    margin-left:200px;  /* Use Left and right margin positioning */    margin-right:200px;    Background-color:yellow;}. Left {    background-color:red;    width:200px;    height:100px;    Float:left;    Margin-left:-100%;}. Right {    background-color:blue;    width:200px;    height:100px;    Float:left;    Margin-left: -200px;}
Comparison of the Holy Grail layout and the double wing :
1. Two layouts are the main content of the front loading;
2. The layout has similarities, all use the negative margin to layout;
3. Different:
The Grail layout is implemented by setting the padding value and relative positioning of the parent container;
The two-wing layout is to add a div container to main, set the left and right margin of main to achieve;
The Holy Grail layout and the double-winged layout