css這個東西，說難不難，說容易也不容易。我覺得最重要的還是經驗的積累，正所謂的不積硅步，無以至千里。這一系列文章講述幾種css特殊布局的實現，也當作為自己做個備忘吧。
首先講的是三列布局，左右兩列寬度固定，中間一列寬度自適應
這個很好實現，左右兩列分別左浮動和右浮動並給一個固定寬度，中間不浮動，也不設定寬度。這樣基本就可以了。但為了兼容IE還必須做些工作。
看下代碼結構：
效果為：
中間列要不要設置margin-left和margin-right ?
注意，中間那列需要把左右兩個外邊距分別設為左右兩列的寬度，否則會有些問題。如下：
在谷歌、火狐等標准瀏覽器下是這樣的（包括IE8+）：
而在IE6、IE7中是這樣的（圖是在IE6下截的）
我們可以看到中間那列子元素的margin-left或margin-right的起點是不一致的，在IE6、IE7中，即使不給中間列設定margin-left和margin-right,它的子元素的左右外邊距的起點仍然是在左右兩列寬的的基礎上的，就像是有margin-left和margin-right一樣。所以為了各瀏覽器保持一致，中間那列還是設一個margin-left和margin-right為好。
IE6中的3px間隙bug
在上圖的ie6截圖中，我們看到各列之間有一條3px的間隔，這是只有IE6才有的問題。
如果中間那列的margin-left和margin-right都為0的話，則只要把左列的margin-right設為-3px,右列的margin-left設為-3px就行了。
但如果把中間列的margin-left和margin-right分別為左右兩列的寬度時（上面已經說了，這也是必須這樣做的），即使把左列的margin-right設為-3px,右列的margin-left設為-3px也還是沒有效果。這時候還得把中間列的margin-left設為左列寬度-3px,margin-right設為右列寬度-3px才行。如下：
最終的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>寬度自適應布局</title>
<style>
body,div{ margin:0; padding:0;}
div{ height:200px; color:#F00;}
.left{ float:left; width:100px; background:#00f; _margin-right:-3px;}
.right{ float:right; width:100px; background:#0f0; _margin-left:-3px;}
.center{ background:#333; margin:0 100px; _margin:0 97px;}
</style>
</head>
<body>
<div class="left">我是left</div>
<div class="right">我是right</div>
<div class="center">我是center</div>
</body>
</html>
兩列布局，一列寬度固定，另一列自適應布局也是這個道理的。