用CSS floats創建三欄頁佈局_經驗交流

三欄佈局是目前最常見的網頁佈局，主要頁內容放在中間一欄，邊上的兩欄放置導覽連結之類的內容。基本版面一般是標題下方放置三欄，三欄佔據整個頁面的寬度，最後在頁的底端放置頁腳，頁腳也佔據整個頁面寬度。

絕大多數網頁設計者都熟悉傳統的網頁設計技術，用這些技術可以產生帶有表格、建立固定寬度佈局或「液態」（它可以根據使用者瀏覽器視窗寬度自動伸縮）佈局的網頁。

現在，我們都開始拋棄基於表格的佈局技術，許多網頁設計者正在從XHTML標記和CSS格式這一新範例中尋找創建三欄佈局的方法。用絕對定位的方法從CSS中得到固定寬度的佈局並不困難；但是得到液態佈局就有點困難了。因此，本文介紹一種以CSS的float和clear屬性來獲得三欄液態佈局的方法。

基本方法 
基本的版麵包含五個div，分別是標題、頁腳和三欄。標題和頁腳佔據整個頁寬。左欄div和右欄div都是固定寬度的，並且用float屬性來把它們擠壓到瀏覽器視窗的左側和右側。中間欄實際上佔據了整個頁寬，中間欄的內容在左、右兩欄之間「流淌」。由於中欄div的寬度並不固定，因此它可以根據瀏覽器視窗的改變進行必要的伸縮。中欄div的左側和右側的填充（padding）屬性保證內容安排在一個整齊的欄中，甚至當它伸展到邊欄（左欄或右欄）的底端也是這樣。

三欄佈局的一個例子 
請看看用本文所介紹的技術進行三欄佈局的例子。這個例子用鮮豔的顏色來區分佈局的各個div。

以下是XHTML程式碼：

    

Header

>    Port side text...

    Starboard side text...

    Footer text...

下面是CSS代碼：
    margin: 0px;

    padding: 0px;
} div#header {
    background-color: aqua;
    padding: 1px;
}
div#left {
    float: left;
    width: 150px; div#right {
    float: right;
    width: 150px;
    background-color: green; } divp. px 160px;
    margin: 0px ;
    background-color: silver;
}
div#footer {
    clear: both;
 >