用 DIV 排版兩欄式網頁設計比起
單欄式網頁設計稍微複雜一點，主要是因為一般的兩欄式網頁會有邊欄（sidebar）以及網頁主體區（sitebody），如果是純採用
DIV 區塊來排版的設計方式，就會用到 CSS 的
float 浮動元素設計技巧，其餘部份則是與
單欄式網頁設計差不多，這裡所謂的 CSS
float 浮動元素設計其實就是先固定一個區塊，再讓第二個區塊浮動上來，這樣就像是有兩個欄位一樣，兩欄式網頁設計的邊欄可以放在主體區的左側或右側，我們將這兩種設計方式分為兩個範例來呈現，讓各位讀者朋友們看看差異在哪裡。
用 DIV 排版兩欄式網頁設計範例一、邊欄在左側
範例的各
DIV 區塊彼此間的關係示意圖
範例一的 CSS 程式碼看起來有點冗長，不過都還算是基本的設計語法，例如
DIV 區塊的寬度（width）、高度（height）、邊框（
border）、外距（
margin）、內距（
padding） ... 等，比較重要的是兩欄式排版的各個
DIV 區塊彼此間的位置關係，通常我們習慣在整個網頁最外層用一個 container 包起來，這樣用來設置網頁置中會比較方便，但也並不是絕對，這就看各位設計師的習慣，整個 container 區塊內從上開始有一個 headbox 的區塊，往下有左邊欄（sidebar）以及網頁主體（sitebody），最下方則是用來標示連絡資訊或版權宣告之類的網腳（footer），這樣就夠成一個簡單的兩欄式網頁架構。
各位可能會比較好奇的是為什麼 sidebar 與 sidebody 這兩個區塊可以水平排列在一起？的確，這是 DIV 排版兩欄式網頁的關鍵地方，從範例的程式碼中，各位可以注意到 sidebar 與 sidebody 這兩個區塊都使用了
float 的屬性，這就是第一段中所提到的 DIV 浮動效果，我們讓兩個區塊浮動，就可以自然而然的水平排列在一起，記得在兩個
DIV 區塊下，再加一個用來清除浮動效果的 clear 區塊，這個區塊僅需用「clear:both;」的語法就足夠了，如此一來就可以繼續將 footer 區塊接著延續下去。
用 DIV 排版兩欄式網頁設計範例二、邊欄在右側範例的各
DIV 區塊彼此間的關係示意圖
範例二的程式碼與範例一其實幾乎一樣，唯一的差別在哪裡呢？眼尖的各位可能已經看出來了，就在
DIV 區塊的順序，範例一中的 sidebar 寫在 sitebody 區塊上，所以 sidebar 會先排列出來，然後才是排列 sitebody，可是範例二把 sitebody 區塊寫在 sitebar 前面，呈現的結果就是 sidebar 變成右側邊欄。
以上兩個範例是常見的 CSS
DIV 區塊排版兩欄式網頁的設計技巧，還有很多種不同的設計方式也可以達到類似或同樣的效果，畢竟
DIV 區塊、CSS float 浮動技巧 ... 這些都是基本觀念，有許多種不同的設計組合，就看各位設計師的創意囉！
更多網頁排版技巧
