margin-top nullo con clear in firefox

[cube]

ciao
su questa pagina http://www.gurubengals.com/cuccioli.html
ho questo problema solo su firefox :

le strisce grigie cucciolata del... sono contenute in un h2
i box arancioni contenenti le miniature hanno un float:left

per cui all'h2 ho assegnato un clear:left per posizionare il titolo sotto le miniature

questo nel dettaglio il css dell'elemento h2

h2 {
	clear: left;
	background-color: #afb0b0;
	font-size: 14px;
	padding: 2px;
	margin-top: 20px;
	color: #FFFFFF;
	width: 300px;
}

in explorer 7 è tutto ok.
firefox invece annulla il margin-top
per ripristinare il corretto funzionamento devo inserire un div vuoto con

  <div style="clear:left"></div>

vorrei però evitare di inserire un div senza nessun significato solo per aggiustare le cose...e volevo capire se era un bug di firefox o un errore nel mio css.

grazie

[fcaldera]

<div style="clear:left"></div>

Non vedo questa parte di codice

[thomas_anderson]

Dai la seguente dichiarazione al contenitore del float ed elimina il clear su h2:

#contenitore:after {
content: ".";
display: block;
height: 0;
visibility: hidden;
display: block;
clear: both;
}