immagine e float:left

[polliotto]

Ciao a tutti!
Sapreste dirmi per quale motivo, non viene calcolato l'altezza dell immagine?
Il mio problema risale quando l'altezza del testo è minore dell immagine, la riga di background non sta in fondo dell immagine ma al suo fianco, ed e anche il prossimo box inizia di li.

/* CSS  */
.box{ 
	border:1px solid #FF000;
	width:200px;
	background:url(img/riga.gif)  bottom left repeat-x;
}
.box img{
	float:left;
}

<div class="box">
	[img]imm.jpg[/img]
	Lorem ipsum dolor sit amet
</div>
<div class="box">
	[img]imm.jpg[/img]
	Lorem ipsum dolor sit amet
</div>

grazie

[Mich_]

Non so se risolve, ma io metterei un clear nel blocco del div:

.box{ 
  border:1px solid #FF000;
  width:200px;
  clear:left;
  background:url(img/riga.gif)  bottom left repeat-x;
}

[polliotto]

Per primo, grazie per la risposta, adesso il blocco sottostante si imposta bene sotto, però rimane il problema al fatto che la riga , non scende sotto l'immagine.. e quanto il margin e padding bottom viene ignorato.

[webus]

non sono sicuro di avere capito, ma vedo che non hai assegnato le dimensioni all'immagine, ma forse lo hai fatto solo qui per brevità di codice.

Forse però è utile ricordare che le immagini sono elementi inline. Inoltre da quanto hai scritto non capisco perché le hai settate come elementi flottanti.

[polliotto]

A chi interessa, ho risolto il caso in questo modo

.box{ 
	border:1px solid #FF000;
	width:200px;
	background:url(img/riga.gif)  bottom left repeat-x;
}
.box img{
	float:left;
}

<div class="box">
	[img]imm.jpg[/img]
	Lorem ipsum dolor sit amet
</div>
<div class="box">
	[img]imm.jpg[/img]
	Lorem ipsum dolor sit amet
	<div style="clear:both"></div>
</div>