三栏布局方案：左右宽度固定，自适应布局

一、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，排查不易。