contenitore di 4 colonne altezza variabile

[gianis6]

Salve a tutti,

sto realizzando una pagina che prevede 4 colonne affiancate di altezza variabile. dato che vorrei che ogni colonna abbia la solita altezza ho pensato bene di mettere al contenitore di queste 4 colonne un'immagine di background ripetuto sull'asse delle y che ricalca gli sfondi delle colonne (bianco per la prima, grigio per l'ultima).
il problema è che il contenitore delle colonne sembra non sentire l'altezza delle colonne e rimane appiattito in cima, non si visualizza quindi il background impostato. questo accade con Firefox e IE8. Con Ie6 o IE7 ottengo il risultato voluto.

la pagina che sto creando si può visualizzare a
juno.altervista.org/colonne/home.html

Questo è il codice, spero che qualcuno mi sappia aiutare a risolvere questo problema

<style>
    #main-container
    {
        float:left;
        width:100%;
        background-color:#F5F5F6;
    }
    
    #cols-container
    {
        width:995px;
        background:url(images/body_bg.jpg) repeat-y;
        margin:0 auto;
    }
    
    #col1
    {
        width:235px;
        float:left;
    }
    
    #col2
    {
        width:235px;
        float:left;
    }
    
    #col3
    {
        width:335px;
        float:left;
    }
    
    #col4
    {
        float:left:
        width:190px;    
    }
    
    
</style>


<div id="main-container">
    <div id="cols-container">
        <div id="col1">
            Testo


           
        </div>
        
        <div id="col2">
            Testo

            
        </div>
        
        <div id="col3" >
            Testo

            Testo

            Testo

        </div>
        
        <div id="col4">
            Testo


        </div>
        
    </div>
</div>