[crossbrowser] quanto è difficile dire addio alle "table"

[rebelia]

Originariamente inviato da Another-Life
Non ho ben capito l'uso del "clear: both;"...qualcuno mi fa un esempio calzante?? thx

l'immagine sopra ha questo codice:

<div style="border: 1px solid orange;">
<div style="width: 35%; float: left; border: 1px solid blue;"></div>
<div style="width: 60%; float: left; border: 1px solid blue;"></div>
</div>

l'immagine sotto ha questo codice:

<div style="border: 1px solid orange;">
<div style="width: 35%; float: left; border: 1px solid blue;"></div>
<div style="width: 60%; float: left; border: 1px solid blue;"></div>
<div style="clear: both;"></div>
</div>

se non usi quest'ultimo sistema, firefox ti visualizza il codice in alto come vedi, cioe' il div contenitore non avvolge i div che contiene, ma si ritira in alto; se non dai effetti al div contenitore, manco te ne accorgi, ma se gli dai un bordino, uno sfondo o qualcosa, questo problema spesso ti complica la vita

nota: ovviamente ho reso visibile il div con il clear both, ma e' solo per capirci meglio

ad ogni modo float modifica il flusso naturale del codice e clear both serve per ripristinare questo flusso; se non lo usi, il div footer - poniamo - si "spalmerebbe" in modo strano appoggiandosi a volte sui div flottanti, altre (a seconda del browser) attraversandoli... robe cosi'