Problema altezza automatica con i float

[albertozzo]

Salve
Ho le seguenti classi:

.area1{width:500px; height:auto}
.subarea1{width:250px; height:auto; float:left}
.subarea2{width:250px; height:auto; float:left}


<div class="area1">
   <div class="subarea1">....Testo...</div>
   <div class="subarea2">...Testo...</div>
</div>

Utilizzo IE7, FF2, ho notato che l'altezza dell'area1 non aumenta in modo automatico proporzionalmente alle due subaree in float "left", anzi rimane invariato...

Come mai? :master:
Si può risolvere?

Ciao

[fcaldera]

fai una ricerca con "float clearing" in questo forum

[Mich_]

O dai il float anche ad area1
oppure usi il fabclearing (cerca nel forum la pillola)

[albertozzo]

Ottimo il lavoro fatto da fcaldera sulla pillola del fabclearing, l'ho provato sia su:
IE7, FF2, Opera 9.20 e funziona correttamente...

Però nell'editor html "dreamweaver 8" nell'area dedicata all'anteprima la classe non fa nessuno effetto

Come mai?

Questa classe sarà compatibile con le future versioni del browser?

Grazie

[albertozzo]

ho trovato anche un'altra soluzione:

.area1{width:500px; height:auto}
.subarea1{width:250px; height:auto; float:left}
.subarea2{width:250px; height:auto; float:left}


<div class="area1">
   <div class="subarea1">....Testo...</div>
   <div class="subarea2">...Testo...</div>
   

   <div style="clear:both; visibility: hidden;"></div>

</div>

Funzione su IE7, FF2, Opera 9.20, ed anche sull'editor "dreamweaver 8"

Il sistema che ho utilizzato è corretto oppure è meglio non utilizzare questo sistema? :master:


Ciao

[fcaldera]

Originariamente inviato da albertozzo
Però nell'editor html "dreamweaver 8" nell'area dedicata all'anteprima la classe non fa nessuno effetto
Come mai?

L'anteprima di dreamweaver conta poco visto che usa un motore di rendering differente da quelli usati effettivamente dai browser.

Originariamente inviato da albertozzo
Questa classe sarà compatibile con le future versioni del browser?
Grazie

Difficile dirlo... bisognerebbe avere la sfera di cristallo

Originariamente inviato da albertozzo
Il sistema che ho utilizzato io è corretto oppure è meglio non utilizzare questo sistema?

In generale sarebbe meglio evitare soluzioni che obbligano ad usare markup aggiuntivo per una questione di pulizia manutenzione e anche accessibilià della pagina (se hai tanti blocchi flottati devi inserire tanti div solo per correggerne il comportamento) e personalmente non sono sicuro che funzioni in modo uniforme...

[albertozzo]

L'anteprima di dreamweaver conta poco visto che usa un motore di rendering differente da quelli usati effettivamente dai browser.

Azz, questo è importante, credevo che usasse un motore uguale a quello dei browser, allora non bisogna fidarsi ciecamente di quello che ci mostra l'editor...

In generale sarebbe meglio evitare soluzioni che obbligano ad usare markup aggiuntivo per una questione di pulizia manutenzione e anche accessibilià della pagina (se hai tanti blocchi flottati devi inserire tanti div solo per correggerne il comportamento) e personalmente non sono sicuro che funzioni in modo uniforme...

Visto che il "motore di rendering" è diverso di quello dei browser reali e che il mio metodo è una soluzione da evitare, adotto il metodo da te creato "fabclearing" che è sicuramente più testato del mio.

Grazie Mille