[Résolu] Bug float sous IE

Bonjour,

J'ai un bug sous IE (encore) dans un positionnement de colonnes en float.

Aperçu :
Firefox (impeccable)

IE (bug, l'élément au centre est poussé vers le bas, il ne rentre pas entre les deux menus gauche et droite)


Le code :

<div id="conteneur">
<div id="gauche"><p>Test Gauche</p><p>Test Gauche</p></div>
<div id="droite"><p>Test Droite</p></div>
<div id="centre"><p>Test Centre</p></div>
<div id="pied"><p>Test Pied</p></div>
</div>

body { margin: 30px auto; }
div, p { margin: 0px; padding: 0px; border:0px; }
#conteneur {
width:750px;
margin:0 auto;
background-color:yellow;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
margin-right: 150px;
width: 450px;
background-color: blue;
}
#gauche {
float:left;
width: 150px;
background-color: red;
}
#droite {
float:right;
width: 150px;
background-color: green;
}
#pied {
clear:both;
height: 30px;
background-color: #99CC99;
}

Le problème vient de la largeur fixe de l'élément centre (pourtant, en théorie, 150px + 150px +450px + 750px, ce qui corresponds à ma largeur de conteneur).
Bizarrement, si je passe la largeur à 444px au lieu de 450px, le bloc se place bien au centre sous IE mais avec deux petites marges (je pense que les 6px correspondent à 1px pour chaque côté de chaque bloc, 3 blocs, 2 côtés par bloc = 2x3 = 6px). Quand à Firefox, avec un bloc centre à 444px, j'ai 6px d'espace entre le bloc centre et droite.

J'ai le besoin d'avoir un centre un bloc de largeur fixe puisque je dois y placer une image en background.

Une solution pour éviter ce problème sous IE ?

Merci d'avance.
Modifié par DrumSHoTS (26 Sep 2006 - 09:55)

Bonjour,

Essayes en mettant margin: 0; et padding: 0; à tes 3 blocs et passe les tous les 3 en float: left
N'oublie pas de remettre tes blocs dans l'ordre d'affichage dans ton html.

Bon courage

J'ai essayé, tout s'est bien positionné !

Superbe, enfin un gros problème de mise en page résolu.

Merci Ghost.