用CSS 來佈局很容易。如果你已經習慣用表格佈局的話，起先會覺得比較困難。其實不難，只不過動機不同，在實踐上更有意義。
你可以把這一頁的各個部分當作獨立的版塊來看待，無論你選擇哪一塊。你可以絕對或相對地用彼塊取代此區塊。
定位
定位屬性position用來定義一個元素是否absolute（絕對），relative（相對），static（靜態），或fixed（固定）。
static值是元素的預設值，它會依照普通順序生成，就如它們在HTML的出現一般。
relative很像static，但可用top、right、bottom和left屬性來偏移原始位置。
absolute使元素從HTML普通流中分離出來，並把它送到一個完全屬於自己的定位世界。在這個稍微瘋狂的世界，這個絕對的元素可以放置到任何地方，只要設定了top、right、bottom和left的值。
fixed的行為也很像absolute，但參考於瀏覽器視窗相對於頁面而放置絕對的元素，所以，理論上，當頁面滾動的時候，固定元素完全保持在瀏覽器視區中。為什麼說理論上的？不為別的，在Mozilla和Opera中工作得很好，但IE不會。
用絕對定位佈局
你可以用絕對定位來建立一個傳統兩列佈局，只要在HTML中使用如下面的類似規則：
Example Source Code [www.52css.com]
<div id="navigation">
<ul>
< li><a href="this.html">This</a></li>
<li><a href="that.html">That</a></li>
<li><a href= "theOther.html">The Other</a></li>
</ul>
</div>
<div id="content">
<h1>Ra ra banjo banjo</h1>
<p>Welcome to the Ra ra banjo banjo page. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo. Ra ra banjo banjo.</p>
<p>(Ra ra banjo banjo)</p>
</div>
並且應用如下的CSS：
Example Source Code [www.52css.com]
#navigation {
position: absolute; top: 0; left: 0; width: 10em;
}
#content {
margin-left: 10em;
}
你將看到，長度為10em的導航條被設定在左邊。因為導航是絕對定位的，對頁面的其他部分的流動不會有任何影響，所以所需要做的只是把內容區域的左邊界寬度設置為與導航條寬度一樣就可以了。
實在是太容易了！然而你並不受這個兩列方法的限制。用精明的定位，你可以佈置你所如你所需的更多的塊。例如，你需要增加第三列，你可以為HTML增加「navigation2」區塊並且套用如下CSS：
Example Source Code [www.52css.com]
#navigation {
position: absolute; top: 0; left: 0; width: 10em;
}
#navigation2 {
position: absolute; top: 0; right: 0; width: 10em;
}
#content {
margin: 0 10em; /* setting top and bottom margin to 0 and right and left margin } to 10em *
/
絕對定位元素的唯一副作用是，因為它們生活在自己的世界裡，沒有辦法精確決定它們在哪裡結束。如果你使用上面的例子在一個少導航和多內容區域，沒有什麼問題，但是，特別是使用長度和寬度的相對值時，你經常得放棄在下面放置任何事物如腳註的希望。如果你真的要做，與其絕對定位它們，不如浮動它們。
浮動
浮動將移動一個元素到同一線上的左邊或右邊，而周圍也會有內容浮動。
浮動經常用在定位一個頁面內的小型的元素（在本站的原始預設CSS中HTML初級指南和CSS初級指南的「下一頁」連接就是浮動到右邊的。同樣參閱偽元素中的:first- letter範例），但同樣可以用在更大的區塊中，例如導航列。
拿下面的HTML例子，你可以應用後續的CSS：
Example Source Code [www.52css.com]
#navigation {
float: left; width: 10em;
}
#navigation2 {
float: right;
width: 10em;
}
#content {
margin: 0 10em;
}
如果你不希望下一個元素環繞浮動對象，你可以使用clear（清除）屬性。 clear: left將清除左邊元素，clear: right將清除右邊元素，而clear: both會清除左邊和右邊。所以，舉個例子，你需要一個頁面腳註，你可以用id「footer」為HTML增加一個區塊，然後使用如下的CSS:
Example Source Code [www.52css.com]
#footer {
clear: both;
}
嗯，你已經搞定了。一個腳註會出現在所有列的下邊，不管任何一個欄位有多長。
注意
我們已經大體上介紹了地位和浮動，著重強調了頁面的「大」塊，但請記住，這些方法也可以用在這些塊內的任何元素。綜合定位、浮動、邊界、補白和邊框，你可以再現任何的版面設計，在佈局方面，沒有CSS完成不了表格所能完成的事情。
使用表格佈局的唯一理由是你試圖適應古老的瀏覽器。這也是CSS實際上顯示其先進的地方——在文件大小上，高易用性的頁面只相當基於表格的頁面的一小部分