[RESOLU] Alternance float:left; float:right; et clear

Bonjour j'ai un "soucis", enfin peut être je cherche surtout à savoir qui de IE ou de FireFox a raison ^^.

Dans une div englobante je souhaite avoir sur la gauche trois blocs de tailles différentes , ainsi que trois blocs sur la droite (eux aussi de tailles différentes).

J'ai donc disposé les trois premières en float:left; (avec un clear pour les deux dernières) et les trois suivantes en float:right;

Voir le code ci-joint

<div style="background-color:#222222;width:600px;overflow:hidden;">
    <div style="width:200px;height:100px;border:1px solid blue;float:left;">A</div>
    <div style="width:200px;height:100px;border:1px solid blue;clear:left;float:left;">A</div>
    <div style="width:200px;height:100px;border:1px solid blue;clear:left;float:left;">A</div>

    <div style="width:200px;height:100px;border:1px solid red;float:right;">B</div>
    <div style="width:200px;height:150px;border:1px solid red;clear:right;float:right;">B</div>
    <div style="width:200px;height:150px;border:1px solid red;clear:right;float:right;">B</div>
</div>

Le résultat de ce code est visible ici : http://shinji.free.fr/AS/float.html

Pour moi IE a bon : les blocs bleus et rouges commencent tous en haut de la div.
Pour FF (et autre) : les blocs rouges ne commencent qu'à partir du troisième bloc bleu.

Qui a tord ? Est ce un bug connu de FF ?

Merci pour vos réponses .
Modifié par Shinji (30 Jul 2010 - 10:31)

Bonjour,

C'est bien évidement FF qui est dans le vrai (avec clear tu "supprimes" le flottement précédent).

Il serait bien plus judicieux de regrouper tes blocs de gauche dans un div flottant à gauche et des blocs de droite dans un div, éventuellement flottant à droite.

Pourtant je trouve ça étrange, rien n'empêche à la première div rouge de se mettre tout en haut. Les divs bleues n'étant que "clearés" sur la gauche non? Sinon à quoi cela sert d'avoir des clear left, right, both?

Je voulais éviter de rajouter une div justement juste pour effectuer le positionnement.

Merci de ta réponse .

Salut,

Pour expliquer ça simplement, le flux normal des éléments est de gauche à droite et de haut en bas. Tous tes éléments sont donc mis à la file indienne selon cet ordre. Lorsque tu fais sortir un élément du flux normal (float, position:absolute, etc.), il sort tout seul ; les éléments qui le suivent continuent à être disposés de gauche à droite et de haut en bas.

Dans ton exemple :
1er bloc bleu: il est floatté à gauche, il s'y colle donc, ok.
2ème bloc bleu : clear:left signifie, exactement, qu'aucun bloc floatté ne doit pouvoir se situer à sa gauche. Conséquence : pour éviter d'avoir le premier bloc bleu à sa gauche, il passe à la ligne. Le flux normal des éléments continue cependant immédiatement à sa droite ! (et non pas en haut de la div englobante)
3ème bloc bleu: même chose : clear:left donc à la ligne.
1er bloc rouge: Selon l'ordre normal du flux, il se situe donc bien à droite de l'élément précédent. Il n'a pas de clear:left, donc rien ne l'empêche d'avoir un bloc floatté à sa gauche. Il ne passe donc pas à la ligne.

Pas besoin de préciser pour les deux blocs restants

Salut marcv,

Merci c'est très clair, je clos donc en résolu .