[Résolu] IE et l'intrépretation du clear:both

Bonjour,

Je m'excuse par avance car le sujet à du être abordé ici mais dans les recherches que j'ai faites le topic était à mon grand regret laissé sans réponses.

Mon désarroi est d'autant plus grand que depuis que je monte en html css je n'ai JAMAIS rencontré ce bug et je ne comprends pas pourquoi cela ne fonctionne pas, cela remet en question tout les montages que j'ai fait avant çà... .

J'ai réduit au plus simple le code de la page.

Voici le code

<div style="width:200px;height:200px;border:1px solid blue;">
    <div style="border:1px solid red;float:left">Ma Boite N°1</div>
    <div style="border:1px solid orange;float:left;clear:both;">Ma Boite N°2</div>
    <div style="border:1px solid green;float:left">Ma Boite N°3</div>
  </div>

Je vous fournis aussi un lien pour visualiser directement : http://shinji.free.fr/BUG/test.html

Soit une boite avec bordure bleu.
Celle ci contient trois boites.
- La première est en float:left;
- La deuxième, en float:left également et en clear:both afin qu'aucun élément ne remonte au dessus.
- La troisième enfin en float:left.

Pas de Problèmes sous FF ou Chrome...mais sous IE7 et 6 la dernière div se retrouve à coté de la première au lieu d'être à coté de la deuxième.

Une explication ? un début de solution ? je nage en plein brouillard. .

Merci d'avance.
Modifié par Shinji (30 Mar 2009 - 10:51)

Je me permet exceptionnellement de me répondre à moi même afin de démarquer le sujet principal.

Il semble que le problème vienne du fait que le clear et le float soit sur le même élément.
En positionnant une div vide avec juste un clear entre les deux cela marche.

J'en viens à me dire qu'il y a eu jusqu'à aujourd'hui un nombre incalculable de "chance" pour qu'aucune des pages que je dois monter n'ai nécessité cette action ou alors que je l'ai fait naturellement (Oui j'avoue des fois je fais des divs vide en clear ne serait ce que pour avoir une hauteur correcte sous FF).

Néanmoins si vous avez d'autres pistes ou des lectures intéressantes je suis preneur .

bonjour,

Ceci est un bug de IE , que l'on retrouvait aussi dans opera il y a quelque versions ... peut-etre encore ?

Le fait d'inserer un element de type block dans le flux et en clear te permet effectivement d'isoler assurement la zone , tu betonne ton clear de cette façon .

Un element positionner en flottant effectue naturellement un saut de ligne aprés l'element qui le précede dans le flux ... il n'a plus aucune chance de remonter plus haut.

C'est comme ça qu'il faut faire pour passer outre ce bug (ou cette interpretation differente de quelques navigateurs)


GC

Merci pour la réponse, au final on a pas trop le choix ^^.