首先給大家看一個圖： 
以前我們在布局這種需要多列多模塊，多列等高，一般會選擇橫著切一張背景圖來進行模擬，這個也是沒有辦法的辦法。
我們知道單純的兩列等高我們可以利用正內邊距加負外邊距來實現。padding-bottom:32767px; margin-bottom:-32767px;
這個方法的原理是事先通過正內邊距來使其擁有足夠高的布局控件，然後通過負外邊距來使得其的位置不變。通過給父元素溢出隱藏，我們可以隱藏掉事先占據的足夠高的空間。由兩列實際的內容高度來決定整個父元素的高度，從而實現了等高。
習慣思維上，我們都是多列等高，然後把這幾列都浮動。現在我們變換一下思路，直接使用不浮動的一列的時候，情況會怎樣，我們發現，當一列不浮動搭配正內邊距加負外邊距，父元素溢出隱藏，它的高度跟還是由內在元素來決定，但是通過web developer toolbar我們可以看到它實際上已經占據了足夠的高度空間。
同樣的道理，定位也遵循這個規則。我們可以把兩側邊框使用絕對定位來固定到兩側，因為絕對定位是不占布局空間的，那麼我們需要一個文檔流來對父元素進行占位。基本上父元素有多高，就顯示絕對定位的元素多少內容，實際上這也就實現了一個等高。
知道了這個表現原理，那麼我們上文的布局也就不難了，只需要把每列最後一個模塊再進行正內邊距加負外邊距來進行空間占位就可以實現了！至於下邊框，實際上另外一個容器從底下進行拼裝實現的~！
下面放上全部代碼：
[Ctrl+A 全部選擇 提示：你可先修改部分代碼，再按運行]
上述代碼在IE6,IE7,Firefox裡皆能正常顯示，但是在IE8 BETA1裡面，似乎必須配合浮動，正內邊距跟負外邊距的多余空間才能被隱藏，希望正式版的IE8會修復這一點。如果想在IE8 BETA1裡面正常顯示，請大家把最後一個模塊也進行浮動即可~！在此就不做演示了！