網站設計三欄布局是最常見的，也是最流行的，通常情況下，企業網站的布局一般都是巨大的banner、導航、三欄目水平在加上一個頁腳。那么，用CSS如何實現三欄布局呢？
實現原理
基本的布局包含五個div，即標題、頁腳和三欄。標題和頁腳占據整個頁寬。左欄div和右欄div都是固定寬度的，并且用float屬性來把它們擠壓到瀏覽器窗口的左側和右側。中欄實際上占據了整個頁寬，中欄的內容在左、右兩欄之間“流淌”。由于中欄div的寬度并不固定，因此它可以根據瀏覽器窗口的改變進行必要的伸縮。中欄div的左側和右側的填充（padding）屬性保證內容安排在一個整齊的欄中，甚至當它伸展到邊欄（左欄或者右欄）的底端也是這樣。
三欄布局案例
<body>
<style>
body {margin: 0px;padding: 0px;}
div#header {clear: both;height: 50px;background-color: aqua;padding: 1px;}
div#left {float: left;width: 150px;background-color: red;}
div#right {float: right;width: 150px;background-color: green;}
div#middle {padding: 0px 160px 5px 160px;margin: 0px;background-color: silver;}
div#footer {clear: both;background-color: yellow;}
</style>
<div id="header">
<h1>Header</h1>
</div>
<div id="left">左邊</div>
<div id="right">右邊</div>
<div id="middle">中間</div>
<div id="footer">底部</div>
</body>
許多網站設計者用CSS的float和clear屬性來獲得三欄液態布局的方法。用絕對定位的方法從CSS中得到固定寬度的布局并不困難；但是得到液態布局就有點困難了。