problema con float e clear in IE7

[Fobia]

ciao a tutti,
ho il seguente problema:
ho fatto una pagina html riassunta col seguente codice

body>  
<div id="principale">
   <div id="navigazione"> ... </div>
   <div id="extra"> ... </div>
   <div id="contenuto">
         ...
        <div class="cl"> &nbsp </div>
    </div>
   <div id="footer"> ...  </div> 

ed il seguente CSS

#principale {
    width : 900px;
    background: #dde5fb;
    color : #000000;
    margin : 0px auto;
    text-align : center;
}

#navigazione {
color : black;
float : left;
padding: 0 auto;
margin: 0 auto;
width : 160px;
text-align: center;
}

#extra{
color : black;
float:right;
padding: 0 auto;
margin: 0 auto;
width : 160px;
text-align: center;
}

#contenuto {
color : #000000;
margin: 0 170px;
padding-top: 7px;
border-right : 3px #75c5f0 solid;
border-left : 3px #75c5f0 solid;
background-color: white;
}

#footer{
    font-size: 9px;
    background-color: #cc3300;
    margin-top: 15px;
    clear: both;
}
div.cl {
    clear: both;
} 

In poche parole il div class=cl serve a fare in modo che nel caso il contenuto della colonna centrale fosse più corto delle colonne laterali, lo spazio si estenda per tutta la lunghezza delle colonne.
Su firefox non ci sono problemi.
Il problema nasce su IE7 nel caso in cui il contenuto della parte centrale sia più corto della lunghezza delle colonne laterali. In questo caso la parte centrale non resta al centra ma si sposta sulla sinistra, coprendo il colore di sfondo della colonna di sx (solo il colore, mentre i testi rimangono).
Provando a togliere il div class=cl il problema si risolve, ma non ottengo l'effetto desiderato, cioè quello di estendere la colonna centrale.

Soluzioni?

[emnlmn]

Non so per quale motivo, ma provando il codice non riesco a riprodurre il bug di cui parli .
Forse è qualche altro elemento della pagina a interferire, hai un link per visualizzare il tutto?

[Fobia]

ma hai provato a visualizzare con IE? perché a me continua ad essere visualizzato male...