div infantil que se amplía fuera del problema div principal

Question

Quiero algo como this, click here.

Se trata de un simple código HTML en mi:

#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> 
 

 

 

 

El problema es uno de los divs se coloca incorrectamente .El #featContent div va a salir de su padre div #mainContent por razones que no entiendo. Mira esto en jsFiddle here. El margen de #featContent sale de los límites de # mainContent.

Answer 1

........................... Demo Hola ahora dar a #mainContent: overflow:hidden;

#mainContent{ 
overflow:hidden; 
} 

Live demo

Answer 2

agregar relleno a div padre

#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; 
}​ 

demostración hrer http://jsfiddle.net/j4C7T/