Problème border et site centré

bonjour,
j'ai utilisé la méthode d'alsace création pour centré mon site.
le css

body{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:small;
margin:0;
padding:0;
background-color:Black;
text-align: center;
}
#conteneur{
position: relative;
width: 800px;
margin-left: auto;
margin-right: auto;
border: 2px solid #FFCC00;
}
#header{
float:left;
width:100%;
height:100px;
background-color:yellow;
}
#centre{
float:left;
width:100%;
background-color:red;
padding-bottom:20px;
}
#pied{
float:left;
width:100%;
height:30px;
background-color:gray;
}

le html

<div id="conteneur">
<div id="header">header</div>
<div id="centre"></div>
<div id="pied">footer</div>
</div>

sous firefox, la bordure colorée n'apparait pas
sous ie6, affichage correct

avez vous une explication et une solution afin de remédier à ce problème ?
d'avance merci

Bonsoir aaristocat,

En supprimant tous les :

float:left;
width:100%;

...inutiles, cela ira beaucoup mieux

(leur seul effet est de retirer tes 3 blocs du calcul de la hauteur de leur conteneur : celui-ci a donc une hauteur vide, et une bordure "écrasée" sur elle-même tout en haut. Seul IE affiche ta bordure comme tu l'attends, en raison d'une implémentation loufoque du calcul des dimensions... Moralité: ne pas développer dans IE6. Ne regarder le résultat dans IE6 qu'une fois la CSS finie dans un navigateur plus moderne)
Modifié par Laurent Denis (31 Jul 2005 - 22:03)

aaristocat a écrit :
bonjour,
j'ai utilisé la méthode d'alsace création pour centré mon site.

Inconnu