Le div parent ne veut pas s'étirer [resolu]

Salut !

je tourne un peu en rond avec une page ou je fais apparaitre un menu haut sous la fomr classique d'un liste avec des display:Bloc

la page est la: http://www.marquisdemontcalm.net/new.htm

je sais que les photos sont un peu lourdes a charger , je n'ai pas pris le temps de les adapter au web. desole pour les quelques secondes d'attente!

Comme il va y avoir 9 liens et que ma page s'adapte a la largeur, la dite liste passe sur 2,3 ou 4 lignes et tant mieux c'est ce que je veux...

Comme vous le voyez dans le CSS ci dessous, j'ai été obligé de donner une valeur HEIGHT=63px car Firefox et tous les autres navigateurs qui respectent les standards ne m'affichent pas la partie rouge de la meme taille que la hauteur totale de tous mes blocs.
J'ai tourné pas mal en rond et fais 2h d'essais, je ne vois pas l'erreur et je voudrais que la hauteur soit automatique bien sur, le 63px , je veux qu'il dégage

Il me faut un oeil neuf qui va voir ca du premier coup je n'en doute pas
Je suis sur en plus que c'est une ligne a changer

voila le CSS

/* CSS Document */
* {margin: 0; padding: 0;}
/*Éléments généraux*/
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
background-color:#ccc;
margin:0;
padding:0;

}
ul {
list-style-type: none; 
width:100%;
padding:0;
margin:0;
}

p{
font-family: "Century Gothic", Verdana, sans-serif;
font-weight:normal;
font-size:small;
color:#333;
text-decoration:none;
text-align:justify;
margin-top:10px;
margin-bottom:10px;
}

h1 {
font-family:"monotype corsiva",tahoma,verdana;
font-weight:bold;
font-size:x-large;
color:#c00;
text-decoration:none;
text-align:right;
margin-right:5px;
}

h2 {
width:400px;
text-align:right;
float:right;
margin-top:10px;
margin-right:5px;
margin-bottom:10px; 
background-image:url(images/ecusson.png);
background-position:right;
background-repeat:no-repeat;
height:102px;
}
h3 {
font-family:"monotype corsiva",tahoma,verdana;
font-weight:bold;
font-size:xx-large;
color:#999;
text-decoration:underline;
text-align:left;
margin-bottom:25px
}
h4 {
font-family: "Century Gothic", Verdana, sans-serif;
font-weight:normal;
font-size:medium;
color:#44a72f;
text-decoration:underline;
text-align:left;
margin-top:10px;
margin-bottom:10px;
}
/*fin des Éléments généraux*/
/*Éléments ID*/
#conteneur {
	position: absolute;
	width:90%;
	margin-right:5%;
	margin-left:5%;
	margin-top:10px;
	margin-bottom:10px;
	padding:0;
	border:1px solid gray;
}
#header {
background-color:white;
background-image:url(images/header.gif);
background-repeat:no-repeat;
background-position:left;
height:180px;
position:relative;
border-bottom-color:#999999;
border-bottom-style:solid;
border-bottom-width:1px;
}

#menuhaut {
background-color:#cc0000;
text-align:right;
border-bottom:1px solid gray;
padding-left:200px;
height:63px;

}
#gauche {
position:absolute;
left:0px;
width: 200px;
background-color:#999;
}
#centre {
background-color:#F2F4F4 ;
margin-left:200px;
padding:10px;
text-align:justify;
border-left:1px solid gray;}
#pied {
background-color:#C00;
background-image:url(Images/footer.gif);
background-repeat:no-repeat;
text-align:right;
padding:10px;
border-top:1px solid gray;
}
#compteur{
	text-align:left;
	position:absolute;
	bottom:7px;
	left:10px;
}
/*fin des Éléments ID*/


/*Mentions de bas de page*/
p.mentions {
text-align:right;
margin:0}

.mentions a{
font-family:"century Gothic", verdana, arial, sans-serif;
font-weight:lighter;
font-size:smaller;
color:#fff;
}
.mentions a:hover {
color:#ccc;}
/*fin de mentions de bas de page*/


/*Menu haut*/
.menu a {
width: 190px;
height: 20px;
display: block;
text-align: center;
border-bottom: 1px solid gray;
border-left: 1px solid gray; 
text-decoration: none;
color: #fff;
background: transparent;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:small;
}
.menu a:hover {
background: #ccc;
border-bottom: 1px solid gray;
border-left: 1px solid gray; 
color:#C00; 
}
.menu a:active {
background: gray;
border-bottom: 1px solid gray;
border-left: 1px solid gray; 
color: #fff;
}
.menu li {
float: right;
}
/*fin du menu haut*/

/*menu de gauche*/

.menugauche a {
width: 200px; 
height: 20px;
display: block;
text-align: left;
text-decoration: none;
color: #333;
border-bottom: 1px solid gray;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight:normal;
font-size:small;
}
.menugauche a:hover {
     background: #c00;
	 border-bottom: 1px solid gray;
 	 color:#fff; 
     }
.menugauche a:active {
     background: gray;
	 border-bottom: 1px solid gray;
     color: #fff;
     }
	 
/*Fin du menu de gauche*/

.imggauche{
float:left;
margin-right:10px;
margin-top:10px;
border:1px solid gray;
width:30%;
height:30%;
min-width:120px;
}
.imgdroite{
float:right;
margin-left:10px;
margin-top:10px;
border:1px solid gray;
width:30%;
height:30%;
min-width:120px;

Modifié par RoseGrenouille (20 Sep 2005 - 19:06)

Bonjour RoseGrenouille.

Utilise overflow: auto; à la place de height: 63px;

bonjour et merci Stephan!

j'etais sur que c'etait une bétise de ce type.

Ca me fait d'ailleurs voir que OVERFLOW je ne sais pas du tout a quoi ca sert ni comment ca interagit avec le reste

je retournes sur les tuto.

ca fonctionne ......mais sous FF et Cie, plus la fenetre est etroite,plus l'espace laissé sous la dernière ligne de blocs est grand, et ce malgré le margin-bottom=0

remarque je preferes comme ca , mais c'est pas encore parfait, ce n'est pas la hauteur juste de mes trois ou 4 lignes de blocs.


Une autre solution ? Stéphan? quelq'un d'autre ?

bah... Un float: left; à la place du overflow: auto; donne le même résultat, mais tu vas devoir repositionner ton menu gauche ou fixer la largeur de ton menuhaut.

<edit />

#menuhaut {
background-color:#cc0000;
text-align:right;
border-bottom:1px solid gray;
padding-left:200px;
float:left;

}
#gauche {
float:left;
width: 200px;
background-color:#999;
}

Modifié par Stephan (20 Sep 2005 - 18:49)

AHHHHHHHHHHHH ca c'est bon

je bas m'atteler a comprendre pourquoi ca c'est mieux que ce que j'avais fait!

Merci bcp stéphan pour tes précieux conseils

je m'en vais mettre ca en resolu