Child div expands from parent question

Question

I want something like this, click here .

This is 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 that one of the divs is incorrectly placed. The separation #featContent leaves the parent #mainContent div for a reason that I do not understand. See this in jsFiddle here . The #featContent limit is beyond the scope of #mainContent.

Answer 1

Demo Add the following style to #mainContent

 #mainContent { overflow:hidden; } 

Live demo

Answer 2

Add padding to parent 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; }​ 

Demo hrer http://jsfiddle.net/j4C7T/