[Réglé] Margin bottom element flottant sur IE 7

Bonjour,

J'ai un problème étrange sur IE 6, 7 et plus ?

Avec ce code css :

<div style="background:#0F0; padding:10px 0 0 10px; width:640px; overflow:auto;">
	<div style="width:200px; float:left; margin:0 10px 10px 0; height:100px; background-color:#C00;"></div>
    <div style="width:200px; float:left; margin:0 10px 10px 0; height:100px; background-color:#C00;"></div>
    <div style="width:200px; float:left; margin:0 10px 10px 0; height:100px; background-color:#C00;"></div>
</div>

Sur firefox j'obtiens ce résultat :
http://img577.imageshack.us/img577/27/image1ut.png

Et sur IE :
http://img262.imageshack.us/img262/3060/image2bd.png

Sur IE, il ne prend pas en compte le margin bottom de mes divs rouges
Bien sur, je souhaite avoir le même résultat que sur firefox.


Merci d'avance à tous.
Modifié par Snoopy17 (21 Feb 2011 - 16:20)

Bonsoir,

Bizarre, sur IE8 chez moi je ne rencontre pas ce problème avec ton code...

Je n'ai pas vraiment d'explications mais de toute évidence, s'il n'y a aucun élément succédant un <div> auquel est appliqué un margin-bottom, ce dernier est occulté par IE au vu de tes résultats.

En tout cas, pourquoi ne pas ajouter à ton <div> conteneur un padding-bottom de 10px plutôt que d'ajouter un margin-bottom de 10px à chaque <div> enfant ? Cela simplifierait ton code et puis peut-être qu'IE l'interprètera comme tu le souhaites ?

Je ne peux pas appliquer de padding-bottom car il y aura plusieurs rangés de blocs rouges
J'ai testé sur IE 7 via IE tester

Re,

En effet, après quelques recherches, ton problème est connu : IE7 comporte un bug concernant la propriété "margin-bottom" des éléments flottants.

Voici un lien assez explicite soulignant ce problème et proposant une méthode pour le résoudre.

Comme tu peux le voir, la méthode employée est celle que je t'avais suggéré plus haut : renseigner un "padding-bottom" au <div> conteneur. Cette propriété CSS est quant à elle interprétée correctement par IE7.

Maintenant, si tu as besoin de plusieurs rangées de <div> rouges les unes en-dessous des autres, rien ne t'empêches de procéder comme ceci :

<div style="background:#0F0; padding:0 0 10px 10px; width:640px; overflow:auto;"> 
    <div style="width:200px; float:left; margin:10px 10px 0 0; height:100px; background-color:#C00;"></div> 
    <div style="width:200px; float:left; margin:10px 10px 0 0; height:100px; background-color:#C00;"></div> 
    <div style="width:200px; float:left; margin:10px 10px 0 0; height:100px; background-color:#C00;"></div> 
</div>

De cette façon, un "margin-top" est appliqué à chaque <div> rouge. On retire donc le "padding-top" de ton élément conteneur puisque cette marge s'applique désormais via tes <div> rouges. Enfin, on rajoute au conteneur un "padding-bottom" qui sera interprété correctement par tout le monde, même le récalcitrant IE7 !

Du moins sur le papier ! A tester de ton côté avec IETester, je ne l'ai pas sous la main !

Merci ça fonctionne !
Je pensais avoir testé le padding-top mais non

J'aurais appris quelque chose
Sacré IE 7...