css sia per IE sia per firefox

[MrBl4d3]

Ciao, ho un problema... ho realizzato un div di due colonne ma il risultato è differente a seconda del browser utilizzato:
La pagina incriminata è http://www.bladexperience.com/infotestpage.php.

Su firefox viene tutto spostato mentre su IE si vede abbastanza bene (strano). Per risolvere il problema con ff dovrei mettere un

</p> tra un div e l'altro ma in questo modo su ie la distanza tra questi diventa colossale. Come posso fare? Grazie!
Eccovi uno spezzone di codice:

Css:

.SX {
   float: left;
   width: 10%;
   }
.DX {
   float: left;
   width: 90%;
   margin-top:5px;
  }

Html:

 
<div class="SX">[img]images/plus.gif[/img]</div>
<div class="DX">Ciao ciao testo di esempio</div>
</p>
	   


 
<div class="SX">[img]images/plus.gif[/img]</div>
<div class="DX">Secondo esempio blablabla blablabla blablabla</div>
</p>

[erredeco]

Il problema è sicuramente dovuto a questi:

.SX {
float: left;
width: 10%;
}
.DX {
float: left;
width: 90%;
margin-top:5px;
}

Ma come soluzione direi di aggiungere un elemento di separazione con un bel clear:both;
Comunque, esistono sistemi più semplici per ottenere l'effetto che desideri (es. un margin-right associato all'immagine )

Inoltre, se permetti un'ulteriore osservazione, hai usato XHTML, ma il codice è molto confuso, mescola tabelle e div, e presenta ancora elementi come ad es. <p align="center">, che vanno evitati: l'allineamento del testo va affidato solo al foglio di stile