La proprietà float CSS non mostra altezza?

Question

Sono abbastanza nuovo per CSS, quindi, questo potrebbe sembrare stupido:

In CSS, io uso la proprietà di float:left per posizionare un contenuto lasciato all'elemento vicina, ora, ho un contenitore per tutti gli elementi che hanno la proprietà float. come faccio a rendere l'elemento genitore regolare la sua altezza in base al suo contenuto?

il codice HTML:

<div id="page"> 
<div id="side"> 
    <p>my sidebar</p> 
</div> 
<div id="content"> 
    <p>my content</p> 
    <p>my content1</p> 
    <p>my content2</p> 
    <p>my content3</p> 
</div> 

il CSS

/* the "border:3px solid #000;" are used to make the div border visble*/ 
#page{ 
position:relative; 
width:400px; 
background-color: #F4F0EC; 
border:3px solid #000; 
} 
#side{ 

border:3px solid #000; 
float:left; 
} 
#content{ 
float:left; 
border:3px solid #000; 
} 

con quanto sopra, l'aspetto <div id="page"> come ha un'altezza di 0px .... come faccio a fare deforma il contenuto ??

dal momento che sono nuovo a CSS, si prega di spiegare che cosa sono io che faccio male, grazie

Fiddle: http://jsfiddle.net/AuSmP/

Answer 1

È possibile aggiungere overflow:hidden per il vostro div #page, che gli permetterà di ridimensionare per adattare il contenuto.

See Working Demo.

Learn more about overflow property.

In alternativa è anche possibile aggiungere <div class="clear"></div> e poi CSS.clear{clear:both;} per ottenere lo stesso.

See Demo.

Answer 2

Modifica posizione da relativo ad assoluto può anche aiutare fuori
Scegli questa JSFiddle Demo

Answer 3

E 'questo quello che ti aspettavi? http://jsfiddle.net/AuSmP/4/ aggiungi solo float: lo stile a sinistra in #pagina risolverà il trucco, oppure potresti anche usare chiaro: entrambi in fondo