聖杯布局

1、建立架構

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

給container設定padding-left和padding-right來放置左右兩邊側邊欄

#container{
padding-left:px;    //左側寬度
padding-right:px;   //右側寬度
}
           

現在布局詳情

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:%;}
#left{
width:px;}
#right{
width:px;}
#footer{
clear:both;}
           

center部分寬度占據了container的整個，不包括左右padding部分，左側和右側部分隻能在下面行排列。現在效果如圖顯示：

3、将左側移動到與center部分同一行

#left {
  width: px;        /* 左側寬度 */
  margin-left: -%;  
}
           

現在需要将左側部分移動到padding-left區域

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

4、右側部分移動到正确位置

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

5、考慮适應性。當浏覽器視窗改變時，如 果中間部分的寬度小于左側寬度，則會破壞布局。對于ie6不需要考慮，因為IE6不支援min-width屬性。

body {
  min-width: px;  /* 2x 左側寬度 + 右側寬度 */
}
           

考慮到布局在各個浏覽器中的顯示，尤其是在ie6中，左側負邊距被拉到很遠的位置的時候，就需要将左側欄放到右側欄後邊，用hack将ie6挑選出來，單獨設定樣式。

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

           

6、考慮paddding

若在左右側邊欄都加入10像素的padding，則需要更改width屬性。

#left {
  width: px;        /* 左側欄寬度 - padding */
  padding:  px;
  right: px;        /* 左側欄的全部寬度 */
  margin-left: -%;
}
           

整體考慮padding之後，新的css代碼：

body {
  min-width: px;      /* 2x (LC fullwidth +
                            CC padding) + RC fullwidth */
}
#container {
  padding-left: px;   /* LC fullwidth */
  padding-right: px;  /* RC fullwidth + CC padding */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  padding: px px;    /* CC padding */
  width: %;
}
#left {
  width: px;          /* LC width */
  padding:  px;       /* LC padding */
  right: px;          /* LC fullwidth + CC padding */
  margin-left: -%;
}
#right {
  width: px;          /* RC width */
  padding:  px;       /* RC padding */
  margin-right: -px;  /* RC fullwidth + CC padding */
}
#footer {
  clear: both;
}/*** IE Fix ***/
* html #left {
  left: px;           /* RC fullwidth */

           

7、考慮列等高問題

#container {
  overflow: hidden;
}
#container .column {
  padding-bottom: px;  /* X + padding-bottom */
  margin-bottom: -px;  /* 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: %;
  padding-bottom: px;
  margin-bottom: -px;
  background: #fff;         /* Same as body 
                               background */
}