[css] discendenza delle classi

Salve a tutti!

Mi dispiace rompervi sempre, ma ho degli errori arretrati da capire...

Questa volta ho un problema di compatibilità tra firefox ed explorer con le discendenze delle classi.

Ho creato un foglio di stile principale con questa classe:

.modulo {
width: auto !important;
width: 100%;
background: #d5d5d5;
clear: left;

In un foglio di stile secondario, linkato dopo il foglio principale, ho inserito questo codice:

.modulo.mezzo {
width: 49%;
float: left;
clear: none;
}
.modulo.mezzo.sinistro {
margin-right: 2%;
}

La prima parte di codice serve per creare un div con larghezza massima.

La seconda parte di codice mi serve per creare due div, uno accanto all'altro in modo da occupare il 100% dello spazio, con un margine tra l'uno e l'altro del 2%.

Il problema principale sta nel fatto che firefox non legge il codice delle classi discendenti da modulo.

il codice che inserisco è questo:

<div class="modulo">questo è un div al 100% di larghezza</div>

<div class="modulo mezzo sinistro">questo è un div al 50% di larghezza con margine destro incorporato</div>
<div class="modulo mezzo">questo è un div al 50% di larghezza che va ad agganciarsi a quello precedente</div>

Ho provato ad inserire "colore: #00AA00;" nella classe .modulo.sinistro.left per controllare la funzionalità della classe, ma per confermare il problema, su internet explorer esce la scritta verde e su firefox no...

Come posso fare?

VI ringrazio in anticipo per l'aiuto ;)

EDIT: ho risolto, ma ho dovuto inserire un paio di righe di codice "inutili"...

cioè questo codice:

.modulo.mezzo {
width: 49%;
float: left;
clear: none;
}
.modulo.mezzo.sinistro {
margin-right: 2%;
}

diventa:

.modulo.mezzo {
width: 49% !important;
width: 49%;
float: left;
clear: none;
}
.modulo.mezzo.sinistro {
margin-right: 2% !important;
margin-right: 2%;
}