页面布局——圣杯和双飞翼布局（固比固）

圣杯布局来自于文章In Search of the Holy Grail，双飞翼布局源于淘宝的UED。

圣杯和双飞翼布局是同一种布局的不同实现方式，实现的都是三栏布局、两边盒子宽度固定、中间盒子自适应（固比固布局），且中间盒子优先渲染，任何一列都可以最高。

解决方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

    

假设左侧盒子固定宽度为200px，右侧盒子固定宽度为150px，中、左、右列分别简写为CC、LC和RC。

一、Holy Grail layout

仅需要一个额外的div，非常简单的CSS，最小的hack，适用于所有现代浏览器和IE6。

<div id="header"></div>
<div id="container">
    <div id="center" class="column"></div>
    <div id="left" class="column"></div>
    <div id="right" class="column"></div>
</div>
<div id="footer"></div>

（1）设置padding-left和padding-right分别为左右侧盒子的宽度；
（2）设置中、左、右盒子的宽度及float，footer清除浮动；
（3）放置左盒子：margin-left:-100%;使左盒子与中盒子左侧重合，使用相对定位使左盒子左移（？仅设置左盒子position:relative;）；
（4）放置右盒子：margin-right:-150px;；
（5）如果中盒子小于左盒子，布局会被破坏（IE6不会发生该问题），可设置最小宽度；
（6）对于IE6，margin-left:-100%;将左盒子拉得太远（整个浏览器窗口的宽度），需借助left定位。

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

如果每一列之间需要设置padding，

二、双飞翼布局

给中间盒子增加额外的div

里层main-content的作用就是将main定位到合适的位置，并方便设置padding等属性。

<div id="header"></div>
<div id="center" class="column">
    <div id="inside"></div>
</div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
<div id="footer"></div>

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
.column {
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-left: -150px; /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}