如何防止两个div中的浮动内容重叠？

Question

在FAQ页面中,我试图让我有一个具有这种结构的页面:

<section id="container">

     <div id="faq_primary"></div>
     <div id="faq_sidebar"></div>

</section>

<footer>

     <div id="directory">

          <div id="col_a"></div>
          <div id="col_b"></div>
          <div id="col_c"></div>

     </div>

</footer>

这是相关的CSS:

#container {
    width:960px;
    margin: 0px auto;
    position:relative;
}

#faq_primary {
    width:720px;
    margin:20px 40px 0 0;
    position:relative;
    float:left;
    display:inline; 
}

#faq_sidebar {
    left:760px;
    position:absolute;
}

footer {
    width:1111px;
    height:250px;
    margin:90px auto 0px;
    position:relative;
    background-image:url(../images/footer/bg.png);
    color:#7d7d7d;
}

#directory {
    width:960px;
    margin:0px auto;
    padding-top:25px;
    font-size:13px;
}

#directory ul li{
    padding-bottom:4px;
}

#dir-cola, #dir-colb, #dir-colc, #dir-cold, #dir-cole {
    width:174px;
    height:140px;
    float:left;
}

#dir-cola {
    width:150px;
}

#dir-cole {
    width:143px;
}

我的页面内容在该部分中找到,container页脚位于下方.它faq_sidebar比faq_primary脚本短得多,并且由于页脚中的列都是向左浮动的,它们最终到达faq_primary的右边,在faq_sidebar下面.

这是一个截图:

任何建议,以便我可以防止页脚和容器中的内容重叠？

Answer 1

你可以在这里添加一个清算div

<div id="faq_sidebar"></div>

<div class="clear"></div>

</section>

然后像这样设计它

.clear{
    clear:both;
}

如果不这样做,您可能需要在之后添加它 </section>

Answer 2

很难知道没有得到相同的内容,当我尝试这个我不能产生与截图相同.(由于内容不同).

但我很确定你是否:

#container
{
    // ... *snip*
    overflow: hidden;
}

将导致容器在计算高度时包含浮动子项.

此外,我建议您更改sidbar left: ...,right: 0如果您正在尝试将其设置为右侧(或者float: right可能是正确的而不是绝对定位).

编辑: -我注意到其中一个相关的问题有相同的答案,我可能倾向于建议这是一个重复.问题: 使外部div自动与其浮动内容的高度相同