使用<DIV>标签实现3列网站的最佳方式？

Question

我正在使用这样的布局开发一个3列网站:

    <div id='left'   style='left:      0; width: 150px; '> ... </div>
    <div id='middle' style='left:  150px; right: 200px'  > ... </div>
    <div id='right'  style='right:     0; width: 200px; '> ... </div>

但是,考虑到默认的CSS'position'属性<DIV>'s是'静态',我会<DIV>'s像预期的那样在另一个下面显示.

所以我将CSS属性'position'设置为'relative',并将'middle'和'right'的'top'属性更改<DIV>'s为 - (减去)前面的高度<DIV>.它工作正常,但这种方法给我带来两个问题:

1)即使Internet Explorer 7正确地显示了三列,它仍然保持垂直滚动条,就像<DIV>'s它们一个位于另一个之下,并且在内容结束后存在大量空白区域.我想要那个.

2)这些元素的高度是可变的,所以我真的不知道为每个<DIV>'top'属性设置哪个值; 我不想硬编码.

所以我的问题是,实现这种布局的最佳(简单+优雅)方式是什么？我想避免绝对定位,我也要保持我的设计无表情.

Answer 1

如果您还没有签出A List Apart,那么它应该包含一些优秀的网站设计教程和指南.

本文特别应该帮助你.