使2列div布局的行为类似于2列表格布局

Question

我有一个带有div的基本2列布局，使用以下html代码：

    <div ID="main">
        <!-- body content -->
    </div>
    <div ID="sidepanel">
        <!-- side content -->
    </div>

以及以下css代码：

#main{
    width:80%;
    float:left;
    overflow:hidden
}
#sidepanel{
    width:18%;
    float:right;
    overflow:hidden
}

虽然大多数情况下列都做得很好，但我遇到了一个问题。如果我的主要内容要求正确显示超过80％的屏幕宽度，则会剪掉剩余的宽度。如果我删除了两个overflow:hidden项，则侧面板内容会与正文内容重叠。在任何一种情况下，我能正确看到所有内容的唯一方法是使用Web浏览器缩小功能或提高屏幕分辨率。

使用表格，我可以简单地使用此设置而不使用CSS：

<table>
<tr>
<td>
<!-- body content -->
</td>
<td>
<!-- side content -->
</td>
</tr>
</table>

一切正常。

总的来说，如果主体中的内容对于屏幕来说太宽，我想要一个水平滚动条而不是剪辑。

任何人都知道如何修复此问题，同时仍然使其与IE7兼容，而不必使用表格进行布局？

Answer 1

#main{
    width:80%;
    float:left;
    overflow: scroll;
}

或者，如果你想确保只有一个水平滚动条，因为只有溢出才能同时进行水平滚动和垂直滚动：

    overflow-x: scroll;

据我所知，IE7支持overflow-x，所以你应该好好接受这个。