翻译自：In Search of the Holy Grail
原文：http://www.alistapart.com/articles/holygrail
这个翻译的页面版权归greengnn所有，转载请注明出处
第一步：创建一个结构
xhtml开始于header, footer, and container
<div id="header"></div>
<div id="container"></div>
<div id="footer"></div>
CSS先定义container，给将要加入的sideleft，和sideright留下个位置
#container {
padding-left: 200px; /* LC width */
padding-right: 150px; /* RC width */
}
我们的布局现在看起来是这样的
图1——创建框架
第二步：增加内容元素
在第一步基础上增加内容元素
<div id="header"></div>
<div id="container">
<div id="center" class="column"></div>
<div id="left" class="column"></div>
<div id="right" class="column"></div>
</div>
<div id="footer"></div>
然后分别定义widths和float 让元素排列在一条线上，还有清除footer的浮动对齐
#container .column {
float: left;
}
#center {
width: 100%;
}
#left {
width: 200px; /* LC width */
}
#right {
width: 150px; /* RC width */
}
#footer {
clear: both;
}
这里给center元素定义了100% width，让它占满montainer的可用空间，现在的布局变成了这样
图2：增加内容元素
[1] [2] [3] 下一页
