这是带有页眉和页脚的简单三列布局：
<!DOCTYPE html>
<html>
<head>
<title>Column Layout</title>
<style type="text/css">
.column {
width: 33%;
border: 1px solid gray;
float: left;
}
#footer {
clear: both;
}
</style>
</head>
<body>
<div id="header">Header</div>
<div class="column one">
Column 1
</div>
<div class="column two">
Column 2 I am the very model of a modern major general.
</div>
<div class="column three">
Column 3
</div>
<div id="footer">Footer</div>
</body>
</html>
通过浮动列，它们彼此相邻出现。通过clear: both用于页脚，它位于列的下方。
在最近的浏览器中，您可以使用CSS3多列布局更简单地实现列。
如果要根据可用空间将列数从三列更改为六列，则可以尝试使用媒体查询。像多列布局一样，媒体查询是一个相对较新的功能。如果要在较旧的浏览器中实现此目的，则需要使用JavaScript（或创造性地使用浮点数）。
有关跨浏览器多列布局的详细讨论，我强烈建议CSS Mastery：高级Web标准解决方案。这是一本好书。