Blocchi flottanti: problema su Firefox

[crinzy]

Ho un problema su Firefox:
in un div devo inserire 2 div uno a fianco all'altro;
il primo contiene un'immagine, il secondo del testo.

Quando il testo ha un'altezza maggiore dell'immagine, non deve scorrere sdotto di essa, questo infatti è il motivo per cui ho fatto 2 div separati e flottanti l'uno accanto all'altro.

Allego un'immagine con il comportamento corretto:
su IE 6 e 7 funziona tutto bene, su Firefox no.....can anyone help me?

il mio codice è questo:
-----------------------------------------------
<div id="contenitore">

<div id="immagine">
[img]flottami.gif[/img]
</div>

<div id="testo">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ligula risus, consequat eget, placerat quis, tempor in, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ligula risus, consequat eget, placerat quis, tempor in, mi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ligula risus, consequat eget, placerat quis, tempor in, mi.
</div>

</div>
-----------------------------------------------


il css applicato è questo:
-----------------------------------------------
<style type="text/css">
* {
margin:0;
padding:0;
}
#contenitore {
float:left;
width:300px;
background-color:red;
}
#immagine {
float:left;
}
#testo {
float:left;
}
</style>
-----------------------------------------------