div, float e img che sfora

[blur]

ciao,

ho un div contenitore in cui devo allineare a sx un immagine e a dx un testo.
Per allineare l'img ho usato un float:left.
Il problema è che se il testo è più breve dell'altezza dell'img, questa mi esce dal div. Perchè?

Nel div contenitore ho solo impostato dei padding per centrare il testo

#news {
background: #f0f0f0; 
border:1px solid #929292;
text-align: justify;         
padding-top: 0px;        
padding-right: 10px;        
padding-left: 10px;        
padding-bottom: 10px;        
margin-bottom: 30px;        
}

quindi nell'html semplicemente:

<div id="news">
[img]immagine.jpg[/img]


testo testo testo</p>
</div>

[ignorantone]

Perchè il funzionamento previsto è quello.
Ci sono diversi modi in cui puoi risolvere.

1° - Inserire un ulteriore elemento (ad esempio un div) prima della chiusura del div impostando lo stile clear su left.
In questo modo si posizionerà subito dopo gli elementi flottati a sinistra allungandoti di fatto il div ed evitando lo sforamento.

2° - imposti al div contenutore lo stile overflow su hidden per esempio.

3° - se sei a conoscenza delle dimensioni dell'immagine puoi impostare al div contenitore lo stile min-height settandolo ad una dimensione congrua (più grande dell'immagine flottata).

[blur]

ho risolto con overflow: auto;

grazie