一、左右三栏布局
前面所述的左右双栏布局的实现方法，嵌套地使用可以得到各种左右三栏布局，但是这样看起来有些啰嗦。因此，最好还是用直接的方式实现三栏布局。对于三栏布局，依照左中右是固定还是流动来划分，同样有各种情形：（1）固定-固定-固定；（2）固定-固定-流动；（3）固定-流动-固定；（4）固定-流动-流动；（5）流动-固定-流动；（6）流动-流动-流动。
这些布局方式的一个流动指占用剩余的宽度，二个或三个流动指按指定比例分配剩余的宽度。
和双栏的情况类似，布局（1）和（6）各部分都使用同样的长度单位，是最简单的，我们只需要用元素的 float 属性就可以实现了。
类似地，布局（2）和（3）中只有一个流动部分，也可以用绝对定位来实现。
稍微复杂地是布局（4）和（5），它们既有固定项又有两个流动项，比较不好处理。不过方法还是有的：使用负的margin值，详情参考[1][2]。
二、上下三栏布局
参考资料[3]，我们可以得到一个兼容各个浏览器的上下三栏布局。最简单的代码如下：
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />
<style type="text/css">
html, body {
overflow: hidden;
height:100%;
margin:0;
padding:0;
}
html {
_padding: 110px 0 60px 0;
}
#header {
position:absolute;
top:0;
left:0;
100%;
height: 110px;
background:#999;
}
#content {
position:absolute;
top:110px;
right:0;
bottom: 60px;
left:0;
overflow:auto;
100%;
_height:100%;
background: #666;
}
#footer {
position:absolute;
bottom:0;
left:0;
100%;
height: 60px;
background:#999;
}
p {
font-size: 5em;
}
</style>
</head>
<body>
<div id="header">header</div>
<div id="content">
<p>text</p><p>text</p><p>text</p><p>text</p><p>text</p>
</div>
<div id="footer">footer</div>
</body>
</html>
其中顶栏和底栏分别为 110px 和 60px 高度，中栏填满其它宽度。当内容过多时，滚动条只出现在中栏。CSS 代码中带下划线的部分是针对 IE6 的兼容处理。因为在 IE6 中，对于 position: absolute 的元素，同时指定 top，bottom，left，right 不能当它自动填满空间。其它的标准浏览器没有这个问题。另外注意这时候 body 元素不能再指定 position: relative，否则在 IE6 中定位是错误的。
三、CSS3 中的简单方式
在支持 CSS3 的浏览器中，这些基本的多栏布局已经是非常简单了，详情见参考资料[4]。
参考资料：
[1] Dynamic Drive: CSS Liquid Layout #3.5- (Fluid-Fluid-Fixed)
[2] Dynamic Drive: CSS Liquid Layout #3.8- (Fluid-Fixed-Fluid)
[3] 姗姗来迟的div仿框架布局 - css探索之旅
[4] CSS3 弹性盒模型与流式布局 - leecan_zeng - 博客园
[YAML] Date: 2011-05-24 09:18:43, Updated: 2013-01-01 12:30:00