使用浮动时停止重叠的 Div

Question

当我调整浏览器窗口大小时，三个 Div 块相互重叠。

我的代码是：

CSS

.face{
    width:100%;
    overflow: hidden;
    clear:both;
    clear:left;
    clear:right;
}
    .center {
    width:80%;
    height:3000px; 
    margin:50px auto auto -100px; 
    text-align:center;
    float:left;}.

    .contact{
    width:10%;
    float:left;}

    .menu{
    width:10%;
    float:left;}

HTML

    <div class = "face">

    <div class ="menu">
        <ul class="nav">
        </ul>
    </div>
    <div class="center">
        <div class ="content">
            <?php   ?>
        </div>
    </div>  
    <div class = "contact"> 
            <div id="scrollingDiv"> 
        </div>  
    </div>
</div>      

此代码来自的页面：在此处输入链接描述 我尝试了很多方法来阻止重叠。我尝试过使用相对/绝对定位。我也尝试过不使用浮动。我最近尝试使用左右填充，但都无济于事。

任何建议或工作示例都会很棒。

Answer 1

我认为您的意思是在 Internet Explorer 中，具有“center”类的元素不保持最小宽度。我在 Firefox 9 中没有看到同样的问题。我没有测试过，但尝试为“内容”指定固定宽度，例如 640px。