Alignement de div

Bonjour,
je rencontre un probleme avec des div qui ne veulent pas s'afficher pareil avec Firefox et IE

Voici mon code:

<style>

#conteneur{
width:750px;
position: absolute;
left: 50%;
margin-left: -375px;
margin-top: 10px;
}

#imghaut{
width:750px;
}

#contenu{
border-top:0;
border-bottom:0;
border-left: 2px solid black;
border-right:2px solid black;
background-color: #FFFFFF;
width:750px;
overflow:auto;
}

#gauche{
margin:0;
width: 150px;
background-color:Gray;
float:left;
}

#centre{
width: 446px;
background-color:red;
float:left;
}

#droite{
width: 150px;
background-color:green;
float:left;
}

#imgbas{
width:750px;
}

</style>
<div id="conteneur">
  <div id="imghaut"><img src="haut.bmp" alt=""></div>
    <div id="contenu">
        <center><img src="uneimage.bmp" alt=""><br></center>
        <div id="gauche">du contenu<br>du contenu</div>
	<div id="centre">beaucoup de contenu<br></div>
        <div id="droite">du contenu<br>du contenu</div>
    </div>
  <div id="imgbas"><img src="bas.bmp" alt=""></div> 
</div>

voici le rendu sous firefox:
http://perso.wanadoo.fr/pointnclick/ff.JPG

et le rendu sous ie:
http://perso.wanadoo.fr/pointnclick/ie.JPG

Il y a donc un décalage sous firefox: le div "contenu" depasse a droite.
J'ai essayé de mettre width:auto; sur ce div à la place de 750px, ce qui resout le probleme pour l'affichage sous ff mais un autre probleme apparait: sous ie, le overflow:auto; semble n'avoir aucun effet

En resumé j'ai 2 solutions qui marchent chacune sous un navigateur, mais jamais sur les 2 navigateurs en meme temps

Quelqu'un aurait-il la solution pour que l'affichage soit identique sous les 2 browsers ?

Merci d'avance pour les réponses.

Salut,

Bloc contenu :
width de 750 px + 2 px de marge gauche + 2 px de marge droite = 754 px de largeur

Contenu effectif :
150 px de bloc gauche + 446 px de bloc central + 150 px de bloc droite = 746 px de largeur

-> ce qui induit un espace inutile de 8 pixels

Solution ?

#contenu{
   (...)
   width: [#red]750px[/#];
   (...)
   }
->
#contenu{
   (...)
   width: [#orange]746px[/#];
   (...)
   }

Adieu l'espace l'espace en trop, et donc le décalage.
Modifié par (28 Apr 2006 - 03:05)

oui j'avais pensé à cette solution, mais j'ai des images en haut et en bas de 750px de large pour faire les coins arrondis. Donc si je mets 746px de large, le resultat est ok sous firefox mais pas sous ie

La preuve ici:

Mouais...
Dans ce cas, si tu ne veux pas t'embêter, tu peux toujours passer une valeur différente à IE (l'ancienne de 750px). Il y a plusieurs manières, comme :

#contenu{
   (...)
   width: 746px; /*valeur firefox */
   _width: 746px; /* malgré cet undescore, IE win devrait lire et prendre cette valeur */
   (...)
   }

#contenu{
   (...)
   width: 750px;
   (...)
   }
#conteneur>#contenu { /* sélecteur d'enfant, non reconnu par win */
   width: 746px; /* valeur pour firefox */
   }

...
Modifié par (28 Apr 2006 - 12:55)

ouai ça marche, merci beaucoup!!