三欄佈局是目前最常見的網頁佈局，主要頁內容放在中間一欄，邊上的兩欄放置導覽連結之類的內容。基本版面一般是標題下方放置三欄，三欄佔據整個頁面的寬度，最後在頁的底端放置頁腳，頁腳也佔據整個頁面寬度。
絕大多數網頁設計者都熟悉傳統的網頁設計技術，用這些技術可以產生帶有表格、建立固定寬度佈局或「液態」（它可以根據使用者瀏覽器視窗寬度自動伸縮）佈局的網頁。
現在，我們都開始拋棄基於表格的佈局技術，許多網頁設計者正在從XHTML標記和CSS格式這一新範例中尋找創建三欄佈局的方法。用絕對定位的方法從CSS中得到固定寬度的佈局並不困難；但是得到液態佈局就有點困難了。因此，本文介紹一種以CSS的float和clear屬性來獲得三欄液態佈局的方法。
基本方法
基本的版麵包含五個div，分別是標題、頁腳和三欄。標題和頁腳佔據整個頁寬。左欄div和右欄div都是固定寬度的，並且用float屬性來把它們擠壓到瀏覽器視窗的左側和右側。中間欄實際上佔據了整個頁寬，中間欄的內容在左、右兩欄之間「流淌」。由於中欄div的寬度並不固定，因此它可以根據瀏覽器視窗的改變進行必要的伸縮。中欄div的左側和右側的填充（padding）屬性保證內容安排在一個整齊的欄中，甚至當它伸展到邊欄（左欄或右欄）的底端也是這樣。
三欄佈局的一個例子
請看看用本文所介紹的技術進行三欄佈局的例子。這個例子用鮮豔的顏色來區分佈局的各個div。
以下是XHTML程式碼：
