子 div 扩展出父 div 问题

Question

我想要this, click here 之类的东西。

这是我的 HTML 中的一个简单代码：

  #mainContent {
        margin:0;
        width:100%;
        height:600px;
        padding: 0 0 30px 0;
    }
    #mainContent #sidebar { /* sidebar inside #mainContent */
        float:left;
        width:220px;
        height:560px;
        margin:10px 10px 40px 10px;
        padding:10px 5px 10px 5px;
        background-color:#CCCCCC;
    }
    #mainContent #featContent {
        height:560px;
        margin:10px 10px 40px 260px;
        padding:10px 5px 10px 5px;
        background-color:#CCCCCC;
        overflow:auto;
    }

 <div id="mainContent">
    <div id="sidebar"></div>
    <div id="featContent"></div>
</div>



  

问题是其中一个 div 放置不正确。由于我不明白的原因，#featContent div 正在脱离其父 #mainContent div。在 jsFiddle here 中查看此内容。 #featContent 的边距超出 #mainContent 边界。

Answer 1

Demo 将以下样式添加到#mainContent

#mainContent {
  overflow:hidden;
}

Live demo

Answer 2

为父 div 添加内边距

#mainContent {
    margin:0;
    width:100%;
    height:auto;
    padding:10px 5px 40px 5px; background-color:red
}
#mainContent #sidebar { /* sidebar inside #mainContent */
    float:left;
    width:220px;
    height:560px;
    margin:10px 10px 40px 10px;
    background-color:#CCCCCC;
}
#mainContent #featContent {
    height:560px;  
    margin:10px 10px 40px 260px;
    background-color:#CCCCCC;
    overflow:auto;
}​

演示者http://jsfiddle.net/j4C7T/