以下布局資料原作者︰Owen Briggs
單行單列
單行單列1︰采用float浮在左上角，固定寬度。 - 單行單列2︰固定在左上角，固定寬度，采用的是絕對(absolute)定位。
- 單行單列3︰固定在左上角，不固定寬度，采用百分比(%)定義寬度來自適應頁面。
單行單列4(推薦)︰固定寬度，采用在body樣式中定義居中屬性(text-align: center;)實現適應頁面自動居中。
單行兩列
單行兩列1︰兩列都固定寬度。第一列浮在左上角，第二列浮在第一列右邊。 - 單行兩列2︰兩列都百分比寬度，但不滿屏。第一列固定在左上角，第二列浮在第一列右邊。
單行兩列3︰兩列都百分比寬度，滿屏。兩列都采用絕對定位。 - 單行兩列4︰兩列都百分比寬度，滿屏。第一列浮在左上角，第二列浮在右上角。
- 單行兩列5︰兩列都百分比寬度，滿屏。第一列浮在左上角，第二列浮在第一列右邊。
單行三列
單行三列1︰左右列都絕對定位(右列定位在右上)。左列和右列固定寬度，中間列自適應頁面。 - 單行三列2︰左列定位在左上，右列定位在右上，中間列浮在左列右面。左列和右列固定寬度，中間列自適應頁面。
- 單行三列3︰三列都絕對定位。左列和右列固定寬度，中間列根據內容自適應。
- 單行三列4(推薦)︰類似樣式2，只是將margin: 20px屬性增加在body樣式中，解決了中間列在Netscape6.0中置頂的問題。
單行三列5︰左右列絕對定位，中間列自適應。寬度滿屏。
頂行三列
頂行三列1(推薦)︰頂行自適應頁面寬度。左右列絕對定位，中間列自適應頁面。 
頂行三列2︰寬度滿屏