很多網頁都是採用 TABLE 元素來佈局，將頁面分成不同的功能區。現在業界提倡改用 CSS+DIV 的佈局方式。引導這個趨勢的原因有幾個： TABLE 元素，必須其內含的所有內容都下載完成，才能開始展現，所以比較慢。使用 TABLE 佈局，其標籤碼較多，而有些搜尋引擎會依據內容對標籤碼的比率，評價網頁；比率低的網頁，會給予較低評價。
CSS+DIV 的佈局方式很簡單，由下面的範例就可以看出來。範例的下方有幾個 DIV 元素構成的區塊。每一個 DIV 區塊是一個特定功能的容器，下面分成了：標題，邊欄，主文，頁底。接著就是要設定每一個區塊的位置，這就要用到 CSS 風格表。在下面的風格表中有幾個特徵用於排列位置：
- margin:0px auto：此一設定可以將 DIV 區塊排在水平中央。
- float:left：原本 DIV 區塊是上下排列，此設定可將 DIV 區塊左右並排。下例中，側欄區塊與主文區塊，就是用此特徵才能左右並排。
- clear:left：頁底區塊利用此特徵，排到側欄區塊的下方。
使用時，要將風格表放在 HEAD 元素的區域間。也可以針對不同的 媒體 設定不同的風格表；例如列印時可以不印側欄。
- 風格用法：
<style type='text/css'>
#header2 {width:90%;
height:30px;
text-align:center;
background:#833;
margin:0 auto;
}
#outer2 {width:90%;
margin:0px auto;
background:white;
}
#sidebar2 {width:25%;
float:left;
height:200px;
background:#383;
}
#content2 {width:75%;
float:left;
height:200px;
background:#338;
}
#footer2 {width:90%;
clear:left;
height:30px;
background:#833;
margin:0 auto;
}
</style>
<div id='header2'>標題</div>
<div id='outer2'>
<div id='sidebar2'>邊欄</div>
<div id='content2'>主文</div>
</div>
<div id='footer2'>頁底</div> - 執行結果：
標題主文
