Serie di div con float interni: problemi

[sogol]

Serie di div con float interni: problemi

Salve a tutti!!
Premetto che sono nuovo a questo forum...(e alle prime, meglio seconde armi con i css...)

Ho un problema che riguarda un'elenco di immagini, con un titolo alla destra (entrambi linkabili), allineate verticalmente con una distanza costante, formattate con i css.
Il problema riguarda la resa non omogenea della distanza tra un div (immagine e titolo) e quello successivo.
In Firefox questa distanza si riduce, è quasi la metà di quella in explorer.
Non capisco se è legato ai margini, o se magari si tratta di un noto bug al quale sicuramente qualcuno ha provveduto ha fornire risposta con relativa tecnica ad hoc...(oppure di una mia dimenticanza, non è da escludersi )
La tecnica che ho utilizzato per rendere l'effetto immagine+titolo utilizza un hr reso invisibile che permette al float di funzionare correttamente..
Ecco il codice:

<div id="articoli"> 

<h1>Titolo </h1>

<div class="ttl">
![image](images/1.jpg) 
[url="#"]Titolo
<span class="class_s"> di </span> 
* Nome *
<hr />
</div>

<div class="ttl">
![image](images/2.jpg) 
[url="#"]Titolo
<span class="class_s"> di </span> 
* Nome *
<hr />
</div>



</div>

e il css:

.ttl{ 
margin: 0;
padding: 0;
}

div.ttl hr {
display: block; 
clear: left; 
margin: 3px 0;  
visibility: hidden;}

#articoli img { 
margin: 3px 20px 3px 0;
padding: 0;
border: 1px solid #a8a8a8;
float: left;  
} 

Sarei grato a chi mi desse una dritta in merito!!!!!!!

Mk