Html 使用浮动时停止重叠div

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

我的代码是：

CSS

HTML

此代码来自的页面： 我尝试了许多方法来阻止重叠。我尝试过使用相对/绝对定位。我也尝试过不使用浮动。我最近试着使用左右填充，但都没有用

---

任何建议或工作实例都会很好

我想您的意思是，在Internet Explorer中，类为“center”的元素没有保持最小宽度。我在Firefox9中没有看到同样的问题。我还没有测试过，但是试着给“内容”一个固定的宽度，比如640px

.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;}

    <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>