三列布局是Web站点最常见的布局。主页内容放在中间列中，边上的两个列放在导航链接等上。基本布局通常在标题下放置三列，而三列占据整个页面的宽度。最后，页脚放置在页面的底部，页脚也占据整个页面宽度。

大多数网页设计师都熟悉传统的网页设计技术。这些技术可以生成带有表的页面，创建固定宽度布局或液体（可以根据用户浏览器窗口宽度自动扩展）。

现在我们开始抛弃表格布局技术。许多网站设计者都在寻找从XHTML标签和CSS格式的新范式创建三栏布局的方式。不难通过绝对定位从CSS得到一个固定宽度；但它是一个有点难以得到液体的布局。因此，本文介绍了一种利用CSS属性和明确的浮球获得三塔液体布局方法。

基本方法
基本的布局由五个div，标题，页脚，和三列。页眉和页脚占据整个页面，左栏div和右栏div固定宽度，并压缩与浮动属性浏览器窗口的左侧和右侧的中心实际上占据。整个页面，在两列之间的左和右列内容流。div列的宽度是不固定的，所以它可以根据浏览器窗口的扩展做出必要的改变，中心的右侧和左侧div填充（填充）确保内容属性被安排在一个整齐的柱，甚至当它扩展到侧边栏（左或右列）在它的底部。

三列布局的一个示例
请使用本文介绍的技术来查看三列布局的示例。

下面是XHTML代码：



头


端口文本…


右舷文本…


中柱文字…


页脚文本…



以下是CSS代码：

{体
保证金：0px；
填料：0px；
}
Div#header {
清楚：两者；
身高：50px；
背景颜色：水；
填料：1px；
}
DIV #左{
浮点数：左；
宽度：150px；
背景颜色：红色；
}
DIV #右{
浮子：右边；
宽度：150px；
背景颜色：绿色；
}
# div中{
填料：0px 160px 5px 160px；
保证金：0px；
背景颜色：银色；
}
DIV #页脚{
清楚：两者；
背景颜色：黄色；
}