我們碰到過很多的企業網站或其它小型的展示類網站，有一些共同的特點，即頂部放一個大的導航或BANNER，右側是鏈接或圖片，左側放置內容，頁面底部放置版權信息等。這樣的形式是國內經典式的布局，我們這里不對它的視覺效果作過多的討論，我們今天說說如何用DIV CSS實現三行兩列的布局。

　　我們看下面的圖片：


　　這樣的結構大家再熟悉不過了，我們該如何用DIV CSS實現它呢。我們看下面的分析圖片：


　　它們相對應的關系如下：


　　這個main是起什么作用的呢。由于中間的sidebar、containe是兩列并行的，我們需要設置浮動，讓他們各就各位。但我們的整個頁面是需要居中于瀏覽器窗口的。我們只能為他們設置一個容器main，讓sidebar、containe在這一容器中浮動。不必考慮居中問題。而main就發揮了居中或設置背景的功能。

　　思路已很清楚，我們開始整理HTML代碼：


　　header、main、footer是三個相對獨立的層，而sidebar、containe是main層的子層。這里有一點需要說明，我們可以先寫siderbar、也可以先寫containe，通過浮動的設置，不管哪一個寫在代碼前部，所得到效果是一致的，我們可以通過讓內容在前面的方式對搜索引擎更友好，如下代碼：


　　我們開始寫CSS，對上面的各元素進行樣式表定義：


　　整體布局聲明，邊距與填充均為零。


　　對header的定義：寬度為776px；高度為100px；上下邊距為零，左右邊距為自動，實現了水平居中對齊；背景色為藍色#06f。


　　對main的定義：寬度為776px；上下邊距為零，左右邊距為自動，實現了水平居中對齊；無背景色等其它設置。


　　對main的子層sidebar進行定義：寬度為200px；向左浮動；背景色為桔紅色#f93。


　　對main的子層containe進行定義：寬度為576px(776-200)；向右浮動；背景色為很淡的藍色#dceafc。


　　對footer的定義：寬度與上面的一樣為776px；高度為60px；上下邊距為零，左右邊距為自動，實現了水平居中對齊；背景色為深灰色#666。

　　或許你認為我們對布局的CSS定義已經結束了，其實還存在著問題，為了方便預覽，我們給sidebar、containe設置一個300px的高度，查看一下效果，如圖：


　　在IE中，一切正常，按預定的構思正常顯示出來了，但在FF中，footer層消失了。這是因為FF不知道浮動以后發生的事情，不清楚main的高度為幾何，因而它跑到上面去了，我們看不到它的存在。我們去除containe的背景色，FF中看到的是如下圖的景象：


　　我們應該在sidebar、containe結束的地方清除浮動，讓FF知道如何處理footer層，而不是直接放到上面，在視覺上消失。我們在HTML中增加一個新層，位于sidebar、containe結束的地方：


　　我們定義clearfloat的樣式為：


　　設置的意義是：clear:both;是指不答應左右有浮動對象；高度為1px；溢出為隱藏；頂邊距為-1px，即這一層實際上是不可見的，僅為清除浮動之用。

　　好了，現在基本上沒有問題了，接下來就是在頁面中設置菜單、添加內容并進行相應的樣式定義。關于這些知識我們在以后MB5U.com的文章中再一一向大家介紹。