div bambino che si espande dal genitore div issue

Question

Voglio qualcosa come this, click here.

Si tratta di un semplice codice nel mio 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> 
 

 

 

 

Il problema è uno dei div impropriamente collocato .La #featContent div sta fuori dalla sua div genitore #mainContent per la ragione non capisco. Dai un'occhiata a questo in jsFiddle here. Il margine di #featContent esce dai limiti #mainContent.

Answer 1

........................... Demo Hi ora dare al #mainContent: overflow:hidden;

#mainContent{ 
overflow:hidden; 
} 

Live demo

Answer 2

Add imbottitura per genitore 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/