Immagine con float non da "spessore"

[Pennywise83]

Ciao a tutti!
Non riesco a risolvere un semplice (credo) problema in css...

Innanzitutto vi posto uno screenshot per spiegarmi meglio


In pratica ogni riga e un

con una determinata classe (row1 e row2), l'immagine invece ha una classe "image-left". Come potete vedere le immagini non creano "spessore" per cui non determinano l'altezza del



Questo è il codice:

.row1 {
background: #f0f8ff url('../immagini/dotted.gif') repeat-x bottom;
text-align: left;
padding: 8px;}


.image-left {
margin: 2px 9px 2px 0px;
padding: 3px;
border: 1px solid #cdcdcd;
display: inline;
float: left;
clear: both;}

Come potrei risolvere?

[fcaldera]

prova aggiungendo questa regola

.row1, .row2 {
height : auto;
overflow: hidden;
}


se non funziona cerca "easyclearing" nel forum

Ciauz

[Pennywise83]

Ti ringrazio, la soluzione funziona perfettamente con firefox ma non con Internet Explorer

Come potrei risolvere ?

[fcaldera]

Originariamente inviato da fcaldera
se non funziona cerca "easyclearing" nel forum
Ciauz

[AnFrusch@pepp]

prova a mettere un elemento (anche vuoto) con l'attributo di stile clear: both dopo l'immagine e il testo..
io faccio così quando lavoro con elementi fluttuanti. :master:

Edit:
questo link che suggeriscono facendo una ricerca per easyclearing è ottimale.

[digitos]

Originariamente inviato da AnFrusch@pepp
prova a mettere un elemento (anche vuoto) con l'attributo di stile clear: both dopo l'immagine e il testo..
io faccio così quando lavoro con elementi fluttuanti. :master:

Edit:
questo link che suggeriscono facendo una ricerca per easyclearing è ottimale.

Anch'io faccio così.

E' spiegato in molti siti