圣杯布局

1、创建框架

<p id="header"></p>
<p id="container"></p>
<p id="footer"></p>

给container设置padding-left和padding-right来放置左右两边侧边栏

#container{
padding-left:200px;    //左侧宽度
padding-right:150px;   //右侧宽度
}

现在布局详情

2、在container中添加三列

<p id="container">
<p id="center" class="column"></p>
<p id="left" class="column"></p>
<p id="right" class="column"></p>
</p>

添加样式

#container .column{
float:left;}
#center{
width:100%;}
#left{
width:200px;}
#right{
width:150px;}
#footer{
clear:both;}

center部分宽度占据了container的整个，不包括左右padding部分，左侧和右侧部分只能在下面行排列。现在效果如图显示：

3、将左侧移动到与center部分同一行

#left {
  width: 200px;        /* 左侧宽度 */
  margin-left: -100%;  
}

现在需要将左侧部分移动到padding-left区域

#container .columns {
  float: left;
  position: relative;
}
#left {
  width: 200px;        /* LC width */
  margin-left: -100%;  
  right: 200px;        /* LC width */
}

4、右侧部分移动到正确位置

#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}

5、考虑适应性。当浏览器窗口改变时，如果中间部分的宽度小于左侧宽度，则会破坏布局。

body {
  min-width: 550px;  /* 2x 左侧宽度 + 右侧宽度 */
}

* html #left {
  left: 150px;  /* RC width */