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;
} 

[bionicoz]

Con i CSS di prima generazione non ho mai avuto problemi

Strano perché è esattamente il comportamento che uno si aspetterebbe con i css2.
devi usare un clear:left (o both) dopo l'ultimo elemento interno al contenitore.
C'è anche una soluzione con la pseudoclasse :after che ti permette di non aggiungere codice non semantico, ma sinceramente non ho mai approfondito e nn so dirti se funziona con tutti i browser.
guarda qui
Ciao.

[Iron83]

Ciao bionicoz,

infatti ho risolto subito dopo il post che ho inserito, probabilmente ero fuso dal troppo lavoro e non ho inserito un clear:both!

Grazie cmq!