Parent Altezza non segue i loro figli a galleggiante

Question

altezza

mio mainContainer non segue i loro figli larghezza

e qui è il mio codice Ha qualche suggerimento si prega di avvisare.

Ho bisogno la soluzione CSS non JavaScript in modo ringrazio in anticipo

<div id="mainContainer"> 
    <div id="leftContent"> 

    </div> 

    <div id="rightContent"> 

    </div> 
</div> 

e qui è il mio css

#mainContainer{ 
    width: 1000px; 
    /*height: 1000px;*/ 
    height:auto; 
    margin-left:auto; 
    margin-right:auto; 
    background-color: #ff6600; 
    padding-bottom: 20px; 
} 
#leftContent{ 
    height: 100px; 
    float: left; 
    width: 380px; 
    background-color: violet; 
} 
#rightContent{ 
    height: 100px; 
    float: right; 
    width: 620px; 
    background-color: yellow; 
} 

Answer 1

Aggiungere overflow:hidden; al contenitore:

#mainContainer{ 
    width: 1000px; 
    /*height: 1000px;*/ 
    height:auto; 
    margin-left:auto; 
    margin-right:auto; 
    background-color: #ff6600; 
    padding-bottom: 20px; 

    overflow: hidden; /* <--- here */ 
} 

perché il suo contenuto è flottato, il contenitore div crolla. Utilizzando una classe 'clearfix' o, come ho detto, aggiungendo overflow:hidden, il contenitore conterrà gli elementi float.

AGGIORNAMENTO Spiegazione del perché questo funziona si possono trovare qui: https://stackoverflow.com/a/9193270/1588648

... e qui:

Per consentire loro (browser) per calcolare quello che traboccava i limiti del blocco (e quindi dovrebbe essere nascosto), avevano bisogno di conoscere la dimensione del blocco. Poiché questi blocchi non hanno un'altezza esplicita impostata, i browser hanno invece utilizzato l'altezza calcolata del contenuto.

http://www.stubbornella.org/content/2009/07/23/overflow-a-secret-benefit/

Answer 2

è necessario cancellare gli elementi galleggianti, utilizzare overflow: hidden; per #mainContainer

Demo

alternativo: (è possibile aggiungere clear: both; per cancellare carri)

Demo

Oppure si può anche auto chiara elementi galleggianti (Solo se vuoi sostenerci IE9 = +

.clear:after { 
    content: ""; 
    clear: both; 
    display: table; 
} 

Why this happens?

Answer 3

Usa overflow: hidden e chiaro un galleggiante

#mainContainer{ 
    width: 1000px; 
    height:auto; 
    margin-left:auto; 
    margin-right:auto; 
    background-color: #ff6600; 
    padding-bottom: 20px; 

    overflow: hidden; 
    clear: both; 
}