圣杯布局

1、创建框架

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

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

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

现在布局详情

2、在container中添加三列

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

添加样式

#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 .column {
  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、考虑适应性。当浏览器窗口改变时，如 果中间部分的宽度小于左侧宽度，则会破坏布局。对于ie6不需要考虑，因为IE6不支持min-width属性。

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

考虑到布局在各个浏览器中的显示，尤其是在ie6中，左侧负边距被拉到很远的位置的时候，就需要将左侧栏放到右侧栏后边，用hack将ie6挑选出来，单独设置样式。

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

6、考虑paddding
若在左右侧边栏都加入10像素的padding，则需要更改width属性。

#left {
  width: 180px;        /* 左侧栏宽度 - padding */
  padding: 0 10px;
  right: 200px;        /* 左侧栏的全部宽度 */
  margin-left: -100%;
}

整体考虑padding之后，新的css代码：

body {
  min-width: 630px;      /* 2x (LC fullwidth +
                            CC padding) + RC fullwidth */
}
#container {
  padding-left: 200px;   /* LC fullwidth */
  padding-right: 190px;  /* RC fullwidth + CC padding */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  padding: 10px 20px;    /* CC padding */
  width: 100%;
}
#left {
  width: 180px;          /* LC width */
  padding: 0 10px;       /* LC padding */
  right: 240px;          /* LC fullwidth + CC padding */
  margin-left: -100%;
}
#right {
  width: 130px;          /* RC width */
  padding: 0 10px;       /* RC padding */
  margin-right: -190px;  /* RC fullwidth + CC padding */
}
#footer {
  clear: both;
}/*** IE Fix ***/
* html #left {
  left: 150px;           /* RC fullwidth */

7、考虑列等高问题

#container {
  overflow: hidden;
}
#container .column {
  padding-bottom: 20010px;  /* X + padding-bottom */
  margin-bottom: -20000px;  /* X */
}
#footer {
  position: relative;
}

8、底部布局

<div id="footer-wrapper">
  <div id="footer"></div>
</div>

* html body {
  overflow: hidden;
}
* html #footer-wrapper {
  float: left;
  position: relative;
  width: 100%;
  padding-bottom: 10010px;
  margin-bottom: -10000px;
  background: #fff;         /* Same as body 
                               background */
}