一般的 DIV CSS 三欄式排版

一般三欄式的作法如下圖所示，我的作法會有幾個div框架：top、container、left、content、right、footer這幾個常態會存在的div。

css原始碼

********************

body (如果你要置中，在firefox要正常，就要改成margin: 0px auto;)

#divtop (或者設定百分比)

#divcontainer {} (可以不用設立width，沒有設定會預設為100%)

#divleft

#divright

#divcontent

#divfooter

********************

html原始碼

********************

華山論劍室

左邊是圓

右邊是方

中間方圓並濟

下踩八方

********************

以上的html的排列是關鍵，中間的container內包了左、中、右三個div內容，而左、中、右的原始碼在本體html中的排列順序依序是左、右、接下來才是content

這是因為我們在左div與右div設立了float:left(right)的浮動，因此會ie、firefox瀏灠器會先決定左右的位置後，最後的中間content再排進來，因為我們設立了margin -left:200px;margin-right:200px;，因此空出了左右的區塊寬度。

最後在divfooter裡一定要設定clear:both;的屬性，是為了要清掉float的屬性，好讓footer可以緊接著在最下方正確呈現，若是你沒有設立這個屬性，嘿嘿...footer就會給你浮上去，很不聽話:p

另外，firefox對css整個場景所設定的height會影響底端的footer，以及對於padding與margin的判斷，ie與firefox很不一樣，因此設定上要小心，這點當你反覆設計較複雜的版型時就會碰到，不過知道這點比較好辦了，不外乎是加加減減的算數問題。

還有firefox不吃text-align: center;這個css設定，因此傳統的還蠻好用的啦:p，當然，可以解決的方法有很多，就看大家的創意了。