Perché le mie div si sovrappongono?

Question

Sto provando a creare un div padre all'interno di un elemento di lista che contiene due div bambini per sinistra e destra. La sinistra conterrà un'immagine e la destra conterrà due div aggiuntive che contengono del testo e un timestamp.

Non riesco a visualizzare i div di sinistra e di destra senza sovrapposizioni.

mio HTML è simile al seguente:

<ul class="activity-comments"> 
<li> 
<div style="border: solid 1px #ff0000;"> 
    <div style="float:left;border: solid 1px #0000ff;"> 
     <img src="http://localhost/new/img/sampleimg.png" class="thumb-small"> 
    </div> 
    <div> 
    <small>Some sample text here 1</small> 
    </div> 
    <div> 
    <small>Posted 1 day ago</small> 
    </div> 
</div> 
</li> 
<li> 
<div style="border: solid 1px #ff0000;"> 
    <div style="float:left;border: solid 1px #0000ff;"> 
     <img src="http://localhost/new/img/sampleimg.png" class="thumb-small"> 
    </div> 
    <div> 
    <small>Some sample text here 2</small> 
    </div> 
    <div> 
    <small>Posted 2 days ago</small> 
    </div> 
</div> 
</li> 
</ul> 

Date un'occhiata a questo jsfiddle

Che cosa mi manca?

Answer 1

Si sovrappongono perché si sta galleggiando un div, ma non si sta cancellando il galleggiante.

Utilizzare il metodo clearfix per cancellare il float. Aggiungere una classe container ai vostri div contenitore e usare questo CSS:

http://jsfiddle.net/57PQm/7/

.container { 
    border: solid 1px #ff0000; 
    zoom: 1; /* IE6&7 */ 
} 

.container:before, 
.container:after { 
    content: ""; 
    display: table; 
} 

.container:after { 
    clear: both; 
} 

Noterete anche che ho rimosso il CSS in linea. Questo rende il tuo codice più facile da mantenere.

Answer 2

Mi chiedo se questo è quello che stai cercando: jsfiddle

ho aggiunto in img{display:block;} come immagini viene fornita con imbottitura nascosta che spinge verso il basso elemets.

Answer 3

l'anteprima consente di impostare l'immagine a un'altezza specifica di 41 pixel. Cambiare le dimensioni dell'immagine o cambiare la dimensione div o impostare l'overflow del div esterno.