Utilizzo proprietà float e clear

[cigno]

Ciao ragazzi, è da due giorni che tento di creare un layout con i div.
Ho un problema con l'utilizzo della proprietà float.

C'è una buon'anima che mi mette a posto questo layout mettendo i float giusti.
Mi serve per capire questa cacchio di prorietà!! Con firefox mi viene un disastro!!!

Di seguito lo schema del codice e in allegato l'immagine su come deve essere il layout...
VI PREGO AIUTATEMI!!

<div id="contenitore">
<div id="header">
<div id="loghi">
<div class="logo01"></div>
<div class="logo02"></div>
</div>
<div id="coordinate">
<div class="coordinate01"></div>
<div class="coordinate02"></div>
<div class="coordinate03"></div>
</div>
</div>
<div id="corpo01">
<div class="chisiamo"></div>
<div class="portfolio"></div>
</div>
<div id="corpo02">
<div class="clienti01"></div>
<div class="clienti02"></div>
<div class="clienti03"></div>
<div class="clienti04"></div>
</div>
</div>

[Mich_]

Molto semplicemente:
A tutti i vari blocchi logoXX, coordinateXX, chisiamo, portfolio, clientiXX devi assgnare:
float: left;

A tutti i diretti contenitori loghi, coordinate, corpo1 e corpo2 applichi il clearing come consigliato in [Pillola] FabClearing, un metodo crossbrowser alternativo per il clearing dei float (quindi all':after di ciascun blocco).

Poi devi curare che le dimensioni dei blocchi interni non superino mai il 100%, compreso margini, padding, border e arrotondamenti.

[cigno]

Fin qua ci siamo... Però non capisco come usare il clearing dei float (quindi all':after di ciascun blocco). Sai delucidarmi meglio?

Al contenitore "header" e "contenitore" non bisogna dare niente?


Grazie

[Mich_]

Originariamente inviato da cigno
Fin qua ci siamo... Però non capisco come usare il clearing dei float (quindi all':after di ciascun blocco). Sai delucidarmi meglio?

La situazione e` questa:
Il float fa flottare un blocco e si ripercuote anche sui blocchi successivi: ad esempi se in un testo ci metti dentro una immagien flottata, il testo ci scorre attorno, lasciando lo spazio per l'immagine. tutto bene se il testo e` piu` lungo dell'immagine, ma se l'immagine e` piu` lunga del testo? Occore che il float venga "chiuso", e questo lo si fa con il clear.

Il clear va messo su un blocco che deve esser successivo ai float di un certo livello, e deve essere PRIMA della chiusura del blocco che deve contenre i float, altrimenti il contenitore si chiude prima che siano finiti i blocchi che in teoria contiene.

Un modo intelligente e "furbo" per farlo e` quello trovato da fcaldera e pubblicato in quel thread di cui sopra. Qui e` inutile entrare nel dettaglio del perche` tutte quelle robe in quel blocco :after: eventualmente lo puoi discutere in quel thread, ma puoi anche prenderlo come "si fa cosi`" senza farti altre domande (consigliato per i principianti, che devono impratichirsi su altri aspetti piu` interessanti).

Al contenitore "header" e "contenitore" non bisogna dare niente?

E` gia` messo dentro i contenitori in essi contenuti, quindi non serve.

[cigno]

Grazie molto gentile... solo un passaggio non mi è chiaro:

"Il clear va messo su un blocco che deve esser successivo ai float di un certo livello, e deve essere PRIMA della chiusura del blocco che deve contenre i float"

Non capisco... deve essere messo prima o dopo?

[Mich_]

Non capisco... deve essere messo prima o dopo?

E` una cosa un po' complessa, in questo contesto.

In linea di massima va messo prima della chiusura del contenitore.
Pero` se si usa lo pseudoelemento :after, questo e` indissolubilmente legato al bordo dell'elemento cui si riferisce, quindi mettere il clear nel :after: e` equivalente a metterlo prima della chiusura.

Nota che l':after non funziona in IE6, ma comunque IE6 chiude il blocco dopo i vari float ivi contenuti (e` uno dei bachi di tale browser) per cui il clear in IE6 non serve. Ecco perche` il tutto funziona in modo cross-browser.