儿童div扩展出父母div问题

Question

我想要这样的东西,点击这里.

这是我的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中的这个.#featContent的边距超出了#mainContent边界.

Answer 1

........................... 演示 嗨现在给#mainContent

#mainContent {
  overflow:hidden;
}

现场演示