come funzionano i float???

[sitosisaz]

ciao a tutti ragazzi, io ho visto video e letto informazioni riguardo il tag float ma non riesco a capire come funzionano veramente!!!
vorrei capire come creare una struttura di base ( e poi avanzata ) con il tag float ma veramente non riesco a capire la LOGICA di quest tag!
per esempio, guardate questa pagina di prova http://sitosisaz.altervista.org/float.html
e date un'occhiata al sorgente. Ho flottato il div "sin" a sinistra e automaticamente il div des ( quello blu) è sparito!
La mia domanda è: DOVE è andato a finire il div blu??? perché è sparito?? che logica c'è dietro questo movimento che non riesco a capire?? perché si è messo "sotto" al div giallo??
spero che mi possiate aiutare perché non riesco veramente a capire questi tag float, grazie a tutti ragazzi.

[NLSweb]

prova ad aggiungere al tuo des

clear: left;

guarda questo esempio forse ti aiuta a capire..


p.s.
nel tuo esempio prova ad assegnare ad ogni div il float left e vedrai che si disporranno allineati orizzontalmente

Se vuoi che il div #sin e il div #des stiano nella stessa riga, devi dare a #sin un float left (cosa che hai già fatto) e a #des un float right (o un float left se vuoi).

#sin { background-color: green; height: 150px; width: 250px; float: left; }

#des {background-color: blue; height: 150px; width: 250px; float: right;}

Prova a fare delle modifiche, mettendo al posto di float right, un float left e così capirai bene come funziona e come fluttuano all'interno della pagina.
Poi se vuoi, prova ad inserire un float anche al div #cen.

[sitosisaz]

prova ad aggiungere al tuo des

clear: left;

guarda questo esempio forse ti aiuta a capire..


p.s.
nel tuo esempio prova ad assegnare ad ogni div il float left e vedrai che si disporranno allineati orizzontalmente

grazie per il tuo esempio.
Ora ho più chiaro il funzionamento degli stessi!