colore di sfondo CSS con elementi galleggianti

Question

Diciamo che abbiamo questo molto semplice scenario

<div class="content"> 
    <div class="left"> 
     <p>some content</p> 
    </div> 
    <div class="right"> 
     <p>some content</p> 
    </div> 
</div> 

<div class="content"> 
    <div class="left"> 
     <p>some content</p> 
    </div> 
    <div class="right"> 
     <p>some content</p> 
    </div> 
</div> 

e questo è lo stile:

.content { 
    width: 960px; 
    height: auto; 
    margin: 0 auto; 
    background: red; 
    clear: both; 
} 

.left { 
    float: left; 
    height: 300px; 
    background: green; 
} 

.right { 
    float: right; 
    background: yellow; 
} 

E la cosa è ... quando aggiungo contenuti ad esso dovresti tirare giù il div del genitore, e dobbiamo vedere lo sfondo rosso ... il fatto è che non riesco a vedere lo sfondo rosso riempire tutta l'altezza.

Qualche idea ???

Grazie mille in anticipo.

EDIT:here is a fiddle to test

Answer 1

Quando gli elementi figli sono flottati, vengono portati fuori dal flusso del documento. In tal modo, il genitore non ha più dimensioni definite, poiché i bambini non occupano tecnicamente lo spazio. Quindi, l'elemento genitore collassa su se stesso. La stessa cosa si verifica quando si posizionano in modo assoluto anche gli elementi figli.

In questo caso, possiamo correggerlo aggiungendo overflow:hidden all'elemento padre, forzandolo quindi a contenere gli elementi figli. In alternativa, overflow:auto funziona altrettanto bene. Alcuni potrebbero suggerire che è addirittura migliore di overflow:hidden in quanto sarai in grado di dire se alcuni calcoli sono disattivati.

jsFiddle example

.content { 
    overflow:hidden; 
} 

Ora l'elemento padre non è più crollato e lo sfondo rosso è visibile.

In alternativa, è possibile utilizzare un clearfix se si sta cercando supporto nei browser meno recenti, ma non è consigliabile farlo.

Answer 2

come su come impostare il margine e padding a 0 su tutti div?

Answer 3

provare a chiudere tutte le staffe per i nomi delle classi nel layout HTML e aggiungere proprietà CSS float:left di stile css della classe .content http://jsfiddle.net/u3W79/

Answer 4

Io uso un div chiara vuota alla fine del contenitore contenuti

CSS aggiunto:

.clear { 
    clear: both; 
} 

HTML:

<div class="content"> 
    <div class="left"> 
     <p>some content</p> 
    </div> 
    <div class="right"> 
     <p>some content</p> 
    </div> 
    <div class="clear"></div> 
</div>