child div expanding out of parent div issue

Question

I want something like this, click here.

This is a simple code in my 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>



  

The problem is one of the divs are improperly placed .The #featContent div is going out of its parent #mainContent div for reason I don't understand. Check out this in jsFiddle here. The margin of #featContent goes out of the #mainContent bounds.

Answer 1

Demo Add the following style to the #mainContent

#mainContent {
  overflow:hidden;
}

Live demo