三列的布局，乙個固定寬度的左列是導航列，右列可以放google ads 或者 flickr的像冊，自適應寬度的中間列是主要內容。
特點:
step 1: 搭建結構
先從header, footer, and container開始.
給container 乙個左右方向的內補丁,其寬度相當於左右列的寬度.
#container
現在的布局如下圖:
step 2: 增加列
在已有布局基礎上加再左、中、右列
然後加寬度和浮動，底部的footer須清除浮動，使其保持在最下面。.
#container .column
#center
#left
#right
#footer
現在的**執行的結果如下圖，由於#container的左右填充和#center100%的緣故，左列和右列被擠到#center的下面，這不是我們想要的結果。
step 3: 給左欄定位
採取二步給這個左欄定位，首先給左欄乙個-100%的左邊界，相當於中間欄的寬度，此時，左欄和中間欄重合，共享它的左邊緣，如下圖。
#left
然後採用相對定位的辦法將左欄定位到距右邊200px的地方(也就是左欄的寬度)。
#container .columns
#left
現在左欄的位置正好是#container的左內補丁。
step 4: 給右欄定位
將右欄定位於#container的右內補丁位置，只要設定右欄的負右邊界就可。
#right
現在布局中的空白區域已消失。
step 5:最後的完善
至此，布局已基本完成，但如果瀏覽器的最小尺寸比中心寬度小，那麼左列將變的很小，所以要設定個最小寬度，可惜ie現在還不支援。800x600沒問題
body
第四步完成的**在ie裡左欄會消失，現在要做的是把左欄定到它正確的位置上去。
* html #left
內容的邊距
我們需要給內容乙個內補丁(10px)，否則的話，文字都頂著邊。
列的總寬度等於(padding+width)。
#left
對ie5.x,應該用個hacks
body
#container
#container .column
#center
#left
#right
#footer
/*** ie fix ***/
* html #left
高度自適應
#container
#container .column
#footer
這個**起源於adapted wholesale。
遺憾的是現在opera還不支援#container的overflow，期待版本array。
現在ie還不能真正的自適應高度，還要加下面的**，如果你需要#footer，可再加個div(#footer外面)。
* html body
float: left;
position: relative;
width: 100%;
padding-bottom: 10010px;
margin-bottom: -10000px;
background: #fff; /* same as body
background */ }
三列自適應布局
方法一 float margin main left right 方法二 float bfc main left right 方法三 float 負邊距 relative 這裡和兩列布局有些不同，在兩列布局中，main只需要右移給.left空出位置就可以了，所以給他乙個margin left就能解決...
三列自適應布局 聖杯布局
html結構type text css 設定左右內邊距 container style class container div 複製 在container中新增三列type text css container div center left right style class container ...
完美的DIV三行三列自適應高度布局
我們一般拿出來討論的自適應高度的div布局，都是指有背景區分的，不用區分的三列布局很容易。不過在實際應用中很少有 這樣用，大多都是不用背景區分的。不過在這裡我們並不討論這種布局的實用性到底如何，而只是討論實現這種布局的一種較完美的解決方案而已。所謂自適應高度，也就是不管某一列撐長而其它列的高度也跟跟...