《精通CSS:高級Web標準解決方案》要想使用浮動創建簡單的兩列布局，首先需要有一個基本的(X)HTML框架。在下面的示例中，(X)HTML由品牌區域、內容區域、主導航區域和最後的頁腳組成。整個設計包圍在一個容器div中，這個div使用前面介紹的方法之一進行水平居中：
...
...
這個的設計的主導航區域將位於頁面的左邊，內容位於右邊。但是，爲了易用性和可訪問性，在源代碼中將內容區域主在導航的前面。首先，主內容是頁面上最重要的東西，所以在文檔中應該先出現。其次，這樣可以方便屏幕閱讀器用戶，他們用不着經過可能很長的鏈接列表才找到內容部分。
在創建基於浮動的佈局時，一般將兩列都向左浮動，然後使用空白邊或填充在兩列之間創建一個隔離帶。在使用這種方法時，列在可用空間內包得很緊，沒有喘息的空間。如果瀏覽器表現良好的話，那麼這不是問題：但是差勁的瀏覽器會打亂緊密的佈局，迫使一列退到另一列的下面。
在IE上就會發生這種情況，因爲IE/Win考慮元素內容的尺寸，而不是元素本身的尺寸。在符合標準的瀏覽器中，如果元素的內容太大，它只會超出框之外。但是，在IE/Win上，如果元素的內容太大，整個元素就會擴展。如果這發生在非常緊密的佈局中，那麼就沒有足夠的空間可以讓元素並排出現，浮動元素之一就會退到下面去。其他IE bug（比如3像素文本偏移bug和雙空白邊浮動bug，見第9章）也會導致浮動元素下降。
爲了防止發生這種情況，需要避免浮動佈局在包含它們的元素中太擠。可以不使用水平空白邊或填充來建立隔離帶，而是將一個元素向左浮動，另一個元素向右浮動，從而創建視覺上的隔離（見圖7-2）。如果一個元素的尺寸意外地增加了幾個像素，那麼它不會立刻佔滿水平空間並下降，而只是擴展到視覺隔離帶中。
實現這個佈局的CSS非常簡單。只需爲每列設置想要的寬度，然後將導航向左浮動，將內容向右浮動：
#content {
width: 520px;
float: right;
}
#mainNav {
width: 180px;
float: left;
}
然後，爲了確保頁腳正確地定位在這兩個浮動元素的下面，需要清理頁腳：
#footer {
clear: both;
}
基本的佈局現在完成了。還需要做一些小調整以便讓佈局更有條理。首先，導航區域中的內容一直頂到容器的邊緣上，這不太好看，需要留出點兒空間。可以直接在導航元素上添加水平填充，但是這會調用IE5.x專有的框模型。爲了避免這種情況，將水平填充添加到導航區域的內容上：
#mainNav {
padding-top: 20px;
padding-bottom: 20px;
}
#mainNav li {
padding-left: 20px;
padding-right: 20px;
}
內容區域的右邊也一直頂到容器的右邊緣上，也需要留出點兒空間。同樣並不把填充直接應用到元素上，是把填充應用到內容上，從而避免處理IE的框模型問題：
#content h1, #content h2, #content p {
padding-right: 20px;
}
現在完成了想要的效果： 一個簡單的兩列CSS佈局（見下圖）。
