div e float

[alessandrocarul]

Buongiorno a tutti
ho un piccolo problemino coi div...



In partica ho un div principale (main) che contiente prima un div che da l'immagine alta del box bianco (main_top) e poi un div (main_middle) che oltre a dare il resto del box bianco conterrà due div.

Ora... se questi due div (main_left e main_right, che nell'immagine contengono il testo) sono senza float, si incolonnano ma il main_middle li contiene correttamente (e quindi sotto di loro si vede giustamente il box bianco); se gli metto il float left perchè mi serve affiancarli il div (main_middle) con lo sfondo bianco non li contiene e resta troppo piccolo... che posso fare?

    <style>
    
     html {
        margin: 0px;
        padding: 0px;
        height: 100%;
        width: 100%;
     
     }     
     body{
        font-family: 'arial', 'sans';
        font-size: 11px;   
        background-color: #c8bb97;
     }
      
   
    
    div#main{
    width: 700px;
     height: 100%;
    border: 1px solid #ccc;
    }    
    div#main_top{
    background: url(img/box_top.png) no-repeat left top;
    width: 700px;
    height: 23px;
    }    
    div#main_middle{
    background: url(img/box_middle.png) no-repeat left bottom;
    padding: 0 0px 30px 8px;
    width: 700px;
   
    
    }    
    div#main_right{
    text-align: right;
    width: 318px;
    float: left;
    
    border: 1px solid #bb9d40;
    
    }    
    div#main_left{
    width: 340px;
    height: 100%;
    float: left;
    border: 1px solid #000;
    
    }
    
    

     
    </style>