一列固定寬度

一列式佈局是所有佈局的基礎，也是最簡單的佈局形式。一列式佈局是一種固定的寬度的佈局樣式，一般是一個帶有header、center、和footer 三個並列的佈局。
XHTML:

<div id="layout">1列固定寬度</div>

CSS:

/*1列固定寬度*/
#layout{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 300px;
        height: 300px;
}

效果圖：

一列寬度自適應

自適應佈局能夠根據瀏覽器視窗的大小，自動改變其寬度或高度值。良好的自適應佈局網站對不同分別率的顯示器都能夠提供最好的顯示效果。
預設狀態下的div將佔據整行空間，即是寬度為100%的自適應佈局。一列自適應佈局只要改變這個設定，將固定值改為百分比值的形式便可以了。
自適應的優勢是，當擴大或縮小瀏覽器視窗大小時，其寬度還將維持著與瀏覽器當前寬度比例的80%範圍。
XHTML:

<div id="layout-self-adaption">1列寬度自適應</div>

CSS:

/*1列寬度自適應*/
#layout-self-adaption{
        background-color
 
: #cccccc;
        border: 2px solid #333333;
        width: 80%;
        height: 300px;
}

效果圖：

一列固定寬度居中

頁面整體居中是網頁設計中常見的形式。
div本身支援align="center"屬性，可以讓div呈現居中狀態。但是align對齊屬性是一種樣式程式碼，寫在XHTML的div屬性中，不符合分離原則。
XHTML:

<div id="layout-center">1列固定寬度居中</div>

CSS:

/*1列固定寬度居中*/
#layout-center
 
{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 300px;
        height: 300px;
        margin: 0px auto;
}

這裡margin屬性用於控制物件的上、右、下、左4個方向的外邊距。當margin使用兩個引數時，第一個引數表示上下邊距，而第二個引數則表示左右邊距。margin還支援一個叫auto的屬性值，auto值是讓瀏覽器自動判斷邊距。
效果圖：

二列固定寬度

XHTML:

<div id="left">左列</div>
<div id="right">右列</div>

CSS:

/*2列固定寬度*/
#left{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 300px;
        height: 300px;
        float: left;
}

#right{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 300px;
        height: 300px;
        float: left;
}

效果圖：

二列寬度自適應

XHTML:

<div id="left-self-adaption">左列</div>
<div id="right-self-adaption">右列</div>

CSS:

#left-self-adaption{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 20%;
        height: 300px;
        float: left;
}

#right-self-adaption{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 70%;
        height: 300px;
        float: left;
}

左欄設定寬度為20%，右欄設定寬度為70%，看上去就像一個左側為導航，右側為內容區的常見網頁佈局形式。
效果圖：

二列右寬度自適應

XHTML:

<div id="left-right-self-adaption">左列</div>
<div id="right-right-self-adaption">右列</div></div>

CSS:

/*2列右寬度自適應*/
#left-right-self-adaption{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 100px;
        height: 300px;
        float: left;
}

#right-right-self-adaption{
        background-color: #cccccc;
        border: 2px solid #333333;
        height: 300px;
}

效果圖：

二列固定寬度居中

XHTML:

<div id="layout-new-center">
    <div id="left-center">左列</div>
    <div id="right-center">右列</div>
</div>

CSS:

#layout-new-center{
        margin: 0px auto;
        width: 408px;
}

#left-center{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 200px;
        height: 300px;
        float: left;
}

#right-center{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 200px;
        height: 300px;
        float: left;
}

效果圖：

三列浮動中間列度自適應

XHTML:

<div id="left-three">左列</div>
<div id="center-three">中間</div>
<div id="right-three">右列</div>

CSS:

/*3列浮動中間列度自適應*/
#left-three{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 100px;
        height: 300px;
        position: absolute;
        top: 0px;
        left: 0px;
}

#right-three{
        background-color: #cccccc;
        border: 2px solid #333333;
        width: 100px;
        height: 300px;
        position: absolute;
        top: 0px;
        right: 0px;
}

#center-three{
        background-color: #cccccc;
        border: 2px solid #333333;
        height: 300px;
        margin-left: 104px;
        margin-right: 104px;
}

效果圖：

高度自適應

對#left物件設定了height:100%，同時設定了html和body的height:100%,這是高度自適的關鍵。
一個物件的高度是否可以使用百分比顯示，取決於物件的父級物件。
在預設狀態下，瀏覽器並沒有給body一個高度屬性，所以需要給body設定了100%，然後子級物件的height：100%便起作用了。
給html物件也進行設定100%，是使IE與Firefox瀏覽器都能夠實現高度自適應。
XHTML:

<div id="left-three">左列</div>

CSS:

html,body{
        margin: 0px;
        height: 100%;
}

#left{
        background-color: #cccccc;
        width: 300px;
        height: 100%;
        float: left;
}

效果圖：