css实现圣杯布局（两栏固定-中列浮动-中列div排在前面）--详解

圣杯布局：两栏固定-中列浮动-中列div排在前面，好处是当网速慢的时候，内容列能首先显示出来

<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>

一个额外的DIV包含着我们的三个层,这样的结构符合我集中内容上一体的标记为一体的习惯
样式很也简单,左边侧栏是200PX,右边是150,为了简便标示用LC,RC,CC分别代表左边,右边和中间,样式如下:

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 */
}

原理
其实诀窍很简单，让左边栏与wrap左边的padding，右边栏与wrap右边padding，中间刚好剩下自适应的内容层.left占据的是wrap中的padding-left；right占据的是wrap的padding-right