CSS 3 problemi float

[Iron83]

Ciao ragazzi,

da qualche settimana ho iniziato ad utilizzare i css 3.
Mi sono accorto che utilizzando l'elemento float: left; per tre div contenuti all'interno di un div "contenitore" centrato nella pagina, l'altezza del div contenitore non reagisce al contenuto. In parole spicciole:



ho inserito un div con float: left all'interno del div contenitore ma niente. Con i CSS di prima generazione non ho mai avuto problemi :master:

Pagina html

<div id="layout">

    <div style="float: left; width: 700px;">
    
        <div style="float: left; width: 200px; background: red;">
        daspjdaopdjopdasj
idsadsasd
        </div>
        
        <div style="float: left; width: 200px; background: green;">
        daspjdaopdjopdasj
idsadsasd
        </div>
        
        <div style="float: left; width: 200px; background: purple;">
        daspjdaopdjopdasj
idsadsasd
        </div>
        
    </div> 
      
</div> 

CSS

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 11px;
color: #000000;
background: #EFEFEF;
}

#layout {
width: 986px !important;
width: 986px;
text-align:left;
height: auto;
margin:0px auto auto auto;
padding:0;
border: 1px solid;
}