[Résolu] Espace anormal entre des div ( float )

Bonjour à tous,
J'essaye de faire un design en css.
Mon gabarit est simple et est composé d'un header, d'un footer et d'une zone de contenu. J'essaye de faire des coins arrondis (avec des images ) à mon design et j'ai besoin d'avoir 3 éléments dans le header et le footer.
Donc dans mon header on trouve ceci :

<div id='header'>
 <div id='headerLeft'></div>
 <div id='headerRight'></div>
 <div id='headerCenter'></div>
</div>

#headerLeft
{
	float: left;
	width: 28px; height: 191px;
	background: blue;
}
#headerRight
{
	float: right;
	width: 28px; height: 191px;
	background: blue;
}
#headerCenter
{
	background: red;
	height: 191px;
}

Le problème c'est que sous IE j'ai un espace entre mes divs que je n'ai pas sous firefox et je ne comprends pas pourquoi.
Pour être plus clair voici le rendu sous firefox :

Et la même chose sous IE :


Ca doit pas être grand chose mais j'ai cherché et je ne trouve pas et je n'ai plus d'idée.
Modifié par OlivModeDev (09 May 2008 - 15:05)

Bonjour,

Je parierais sur:
1. Le HasLayout (cf. la FAQ) dû au height: 191px; de #headerCenter qui fait que ce bloc, au lieu de prendre tout la largeur de son conteneur (et donc de passer sous les flottants à gauche et à droite), est repoussé par les flottants.
2. Le vieux bug nommé le «Three Pixel Jog» (chaque flottant repousse ce bloc, qui a le layout, de 3px).

Solution: ne pas conférer le layout au bloc central, ou bien ne pas faire d'intégration avec trois blocs de cette manière pour de la simple décoration. Avec un #header positionné en relatif et des images (ou blocs avec images de fond) positionnés en absolu dans les coins, ça marche très bien. Ou bien peut-être avec deux blocs imbriqués et deux images de fond pour dessiner le header. Ou autre solution... ça dépend du design et de ses contraintes.

On peut éventuellement tenter d'adresser à IE6 uniquement (via un commentaire conditionnel) le correctif suivant pour #headerCenter: margin: 0 -3px. Ça pourrait marcher.

trop fort trop bien !! merci bcp
ça a marché sauf que j'ai mis le margin dans les div des cotés en fait ça donne ça :

#headerLeft
{
 margin-right: -3px;
}
#headerRight
{
 margin-left: -3px;
}

Merci Encore et surtout pour ta rapidité
Modifié par OlivModeDev (09 May 2008 - 15:06)