三列的布局，一個固定寬度的左列是導航列，右列可以放Google Ads 或者 Flickr的像冊，自適應寬度的中間列是主要內容。 
特點:  有一個自適應寬度的中間列與固定的寬度左右列。  中間列的主要內容首先出現在網頁中。  可以允許任一個列的內容為最高。  非常簡單的CSS和最少的Hacks。

Step 1: 搭建結構
先從header, footer, and container開始.
<divid="header"></div> 
<divid="container"></div> 
<divid="footer"></div>

給Container 一個左右方向的內補丁,其寬度相當于左右列的寬度.

#container{ 
padding-left:200px;/*LCwidth*/ 
padding-right:150px;/*RCwidth*/ 
}

現在的布局如下圖:
 

Step 2: 增加列
在已有布局基礎上加再左、中、右列
<divid="header"></div> 
<divid="container"> 
<divid="center"class="column"></div> 
<divid="left"class="column"></div> 
<divid="right"class="column"></div> 
</div> 
<divid="footer"></div>

然后加寬度和浮動，底部的Footer須清除浮動，使其保持在最下面。.
#container.column{ 
float:left; 
} 
#center{ 
width:100%; 
} 
#left{ 
width:200px;/*LCwidth*/ 
} 
#right{ 
width:150px;/*RCwidth*/ 
} 
#footer{ 
clear:both; 
}

現在的代碼運行的結果如下圖，由于#container的左右填充和#center100%的緣故，左列和右列被擠到#center的下面，這不是我們想要的結果。
 

Step 3: 給左欄定位
采取二步給這個左欄定位，首先給左欄一個-100%的左邊界，相當于中間欄的寬度，此時，左欄和中間欄重合，共享它的左邊緣，如下圖。
#left{ 
width:200px;/*LCwidth*/ 
margin-left:-100%; 
}

 

然后采用相對定位的辦法將左欄定位到距右邊200PX的地方(也就是左欄的寬度)。
#container.columns{ 
float:left; 
position:relative; 
} 
#left{ 
width:200px;/*LCwidth*/ 
margin-left:-100%; 
right:200px;/*LCwidth*/ 
}

現在左欄的位置正好是#container的左內補丁。
Step 4: 給右欄定位
將右欄定位于#container的右內補丁位置，只要設定右欄的負右邊界就可。
#right{ 
width:150px;/*RCwidth*/ 
margin-right:-150px;/*RCwidth*/ 
}

現在布局中的空白區域已消失。