三欄布局是目前最常見的網頁布局，主要頁內容放在中間一欄，邊上的兩欄放置導航鏈結之類的內容。基本布局一般是標題之下放置三欄，三欄佔據整個頁面的寬度，最後在頁的底端放置頁尾，頁尾也佔據整個頁面寬度。
絕大多數網頁設計者都熟悉傳統的網頁設計技術，用這些技術可以生成帶有**、建立固定寬度布局或者「液態」(它可以根據使用者瀏覽器視窗寬度自動伸縮)布局的網頁。
現在，我們都開始拋棄基於**的布局技術，許多網路設計者正在從xhtml標記和css格式這一新範例中尋找建立三欄布局的方法。用絕對定位的方法從css中得到固定寬度的布局並不困難;但是得到液態布局就有點困難了。因此，本文介紹一種用css的float和clear屬性來獲得三欄液態布局的方法。
基本方法
基本的布局包含五個div，即標題、頁尾和三欄。標題和頁尾佔據整個頁寬。左欄div和右欄div都是固定寬度的，並且用float屬性來把它們擠壓到瀏覽器視窗的左側和右側。中欄實際上佔據了整個頁寬，中欄的內容在左、右兩欄之間「流淌」。由於中欄div的寬度並不固定，因此它可以根據瀏覽器視窗的改變進行必要的伸縮。中欄div的左側和右側的填充(padding)屬性保證內容安排在乙個整齊的欄中，甚至當它伸展到邊欄(左欄或者右欄)的底端也是這樣。
三欄布局的乙個例子
請看看用本文所介紹的技術進行三欄布局的例子。
這個例子用鮮豔的顏色來區分布局的各個div。
xhtml**：
example source code
以下是引用片段：
port side text...
starboard side text...
middle column text...
footer text...
下面是css**：
example source code
以下是引用片段：
body
div#header
div#left
div#right
div#middle
div#footer
用CSS floats建立三欄頁布局
html 中各部分出現的順序是非常重要的。左欄和右欄div必須在中欄之前出現。這樣才可以讓這兩個邊欄浮動到它們的位置上 螢幕兩側 並讓中欄的內容將 流 入它們之間的空間。如果瀏覽器在乙個或者兩個邊欄div之前先發現中欄，那麼中欄將佔據螢幕的一側或者兩側，這樣浮動的部分就會跑到中欄的下面而不是中欄的旁...
三欄網頁寬度自適應布局方法
一 絕對定位法 html片段如下 left main right css片段如下 html,body left,right left main right 思路 左右兩欄採用絕對定位，分別固定於頁面的左右兩側，中間的主體欄用左右margin值撐開距離。二 雙飛翼布局 main left right ...
三種三欄網頁寬度自適應布局方法
內容提要 在如今各個解析度顯示器n足鼎立的時期，頁面採用流動性布局 亦可稱自適應布局 不失為乙個好選擇。當然，具體實現不 是那麼容易，需要一定的css功力和實踐經驗。本文不講細節，只講外部的自適應架構，這也是實現整個頁面自適應的前提。目前為止，我所熟知的左中右三欄寬度自適應於瀏覽器的方法有三個 絕對...