Ciao a tutti, sono nuovissimo....

il mio problema è forse banale ma non ne riesco proprio a venirne a capo:

Ho un main div, al quale ho settato la proprietà height ad auto, con all'interno altri due div, uno per contenere i testi e uno per il menu.... utilizzo la proprietà float per affiancarli e fin qui tutto bene, il problema sorge quando il div contente i testi diventa più lungo di quello che ospita il menu.
La proprietà background-color che ho impostato al main div non viene visualizzata con Firefox mentre IE visualizza, credo perchè al main div non viene considerata la proprietà height.... c'è un modo per risolvere il mio problema?

vi riporto un codice riadattato per essere più chiaro...

Stile:

codice:
        #main{width: 769px; background-color: navy;}
        #colSx{float: left; width: 562px; height: auto; color: #fff;}
        #colDx{float: left; width: 196px; height: auto; color: red;}
HTML:

codice:
    <div id="main">
        <div id="colSx">testo testotestotest otestotestotestote stotestotestotestotestotesto testotestotestotes totestotestotestotestotestotestotestotest otestotesto testotest otestotestotes totestotestotestotestotesto testotestotestotes totestotesto testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo testo </div>   
        <div id="colDx">testot estotest otest otestotestotestotes tote stotestotestotes totestotest otestotesto testotestotest otestotest otestotest otestotestote stotestotes totesto testotesto</div>            
    </div>
Grazie a tutti!!!!