三欄佈局方案：左右寬度固定，自適應佈局

一、absolute+margin

<div id="content">
    <div id="main">主內容欄自適應寬度</div>
<div id="left">左側邊欄固定寬度</div>
<div id="right">右側邊欄固定寬度</div>
</div>
#main{
height:100%;
    margin:0 210px;
}
#left,#right{
width:200px;
height:100%;
position:absolute;
    top:0 px; 
}
#left{
    left:0px;
}
#right{
right:0px;
}

這裏的左中右三個div的順序是可以任意調整的，這與剩下的兩中方法就不一樣了，需要注意一下。 此方法的優點是，理解容易，上手簡單，受內部元素影響而破壞佈局的概率低，就是比較經得起折騰。 缺點在於：如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。然而，一般情況下，除非用戶顯示器分辨率寬度>=1600像素，否則用戶不會把瀏覽器縮小到1000像素以下的，所以該缺陷危害指數3. 二、float+margin

<div id="content">
<div id="left">左側邊欄固定寬度</div>
<div id="right">右側邊欄固定寬度</div>
    <div id="main">主內容欄自適應寬度</div>
</div>
#main{
height:100%;
    margin:0 210px;
}
#left,#right{
width:200px;
height:100%;
}
#left{
    float:left;
}
#right{
float:right;
}

此方法的優點是：代碼足夠簡潔與高效
不足在於：中間主體存在剋星，clear:both屬性。如果要使用此方法，需避免明顯的clear樣式。
三、float+-margin

<div id="content">
    <div id="main-warp">
        <div id="main">主內容欄自適應寬度</div>
    </div>
<div id="left">左側邊欄固定寬度</div>
<div id="right">右側邊欄固定寬度</div>
</div>

#main-warp{
width:100%;
    float:left;
}
#main{
height:100%;
    margin:0 210px;
}
#left,#right{
width:200px;
height:100%;
float:left;
}
#left{
    margin-left:-100%;      //定位到最左側
}
#right{
    margin-left:-200px;     //自身的寬度
}

三欄相互關聯，可謂真正意義上的自適應，有一定的抗性——佈局不易受內部影響。
缺點在於：相對比較難理解些，上手不容易，代碼相對複雜。出現百分比寬度，過多的負值定位，如果出現佈局的bug，排查不易。