用 CSS 可以比较简单地实现各种双栏布局，这里以左右双栏布局为例。双栏布局包括如下四种：（1）左右均为固定宽度；（2）左右均为比例宽度；（3）左边为固定宽度右边为浮动宽度；（4）右边为固定宽度左边为浮动宽度。
（1）左右均为固定宽度：这种情形比较简单。CSS内容如下：
#left {
300px;
}
#right {
700px;
float: left;
}
（2）左右均为比例宽度：这种情形也简单，CSS内容如下：
#left {
30%;
}
#right {
70%;
float: left;
}
注意左右的宽度比例之和最好不要恰好达到100%，否则会造成左右两栏在一些浏览器（比如 IE8）中无法并排而上下错开。
（3）左边为固定宽度右边占用剩余宽度：这种情形稍微困难，CSS内容如下：
#left {
150px;
position:absolute;
left:0;
}
#right {
position:absolute;
left:160px;
}
其中使用了绝对定位的方式。如果不使用绝对定位也可以做到，不过需要多一层wrapper（参考[1]）。
（4）右边为固定宽度左边占用剩余宽度：这种情形和前面情形类似，CSS内容如下：
#right {
150px;
position:absolute;
right:0;
}
#left {
position:absolute;
right:160px;
}
参考资料：
[1] CSS Liquid Layout #2.1- (Fixed-Fluid)
[2] css - 2 columns div for ie8 and ie7 - Stack Overflow
[3] DIV布局之头尾固定中间自适应 - css探索之旅
[4] 姗姗来迟的div仿框架布局 - css探索之旅
[5] CSS森林(CSS Forest): [原]二栏宽高自适应布局
[YAML] Date: 2011-05-23 17:55:47, Updated: 2013-01-01 12:33:00