28172 sujets

CSS et mise en forme, CSS3

Problème d'extensibilité verticale entre 2 parties

Bonjour à tous Smiley smile

J'essaie de trouver une solution pour une maquette. Cette maquette est basée sur l'une des squelettes proposées par ce forum.
Cependant je rencontre un problème : http://www.monsterup.com/upload/1212324221.jpg

Vous pouvez remarquer que si le "MENU GAUCHE" est supérieur en longueur par rapport à la partie centrale il dépasse le "PIED" de page.

Voici le code : 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>PB DECOUPAGE</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<style type="text/css">
body {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size: 0.8em;
margin: 0;
padding: 0;
}
#header {
height: 100px;
background-color: #99CCCC;
}

#menuline {
height: 50px;
background-color: blue;
}
#conteneur {
position: relative;
width: 750px;
margin: 0 auto; 
background-color:#CCCCFF;
}
#haut {
height: 30px;
background-color:#CCCCFF;
}
.menuhaut {
list-style-type: none;
margin: 0;
padding:0;
background-image: url('design/menu_fond.jpg');
height: 47px;
}
.menuhaut li {
display: inline;
}
.menuhaut a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menuhaut a:hover {
text-decoration: none;
}
#centre {
background-color:#9999CC;
margin-left: 150px;
}
#gauche {
position: absolute;
left:0;
width: 150px;
}
#pied {
height: 30px;
background-color: #99CC99;
}

.menugauche {
list-style-type: none;
margin: 0;
padding:0;
}
.menugauche li {
margin-bottom: 5px;
}
.menugauche a {
margin: 0 2px;
color: #000000;
text-decoration: underline;
}
.menugauche a:hover {
text-decoration: none;
}
p {margin: 0 0 10px 0;}
</style>

</head>

<body>

<div id="conteneur">

	<div id="header">
		<div style="float:left;">LOGO</div>
		<div style="float:right;">RACCOURCIS</div>
	</div>

 

	<div id="menuline">
		MENU HORIZENTAL
	</div>

 

	<div id="gauche">
		menu GAUCHE <br />
		menu GAUCHE <br />
		menu GAUCHE <br />
		menu GAUCHE <br />
		menu GAUCHE <br />
		menu GAUCHE <br />
		menu GAUCHE <br />
		menu GAUCHE <br />
		menu GAUCHE <br />
		menu GAUCHE <br />
		menu GAUCHE <br />
		menu GAUCHE <br />
		menu GAUCHE <br />
	</div>
	  
	<div id="centre">
		partie centrale qui "pousse" les colonnes vers le bas.<br>
		partie avec du contenu occupant le reste de la largeur<br>

		partie avec du contenu occupant le reste de la largeur<br>
		partie avec du contenu occupant le reste de la largeur<br>
		partie avec du contenu occupant le reste de la largeur<br>
		partie avec du contenu occupant le reste de la largeur<br>
		partie avec du contenu occupant le reste de la largeur<br>
		partie avec du contenu occupant le reste de la largeur<br>
	</div>

	  
	  <div id="pied">pied de page de largeur fixe : 750px </div>

</div>

</body></html>


Comment puis-je régler ce problème ?

Merci pour votre aide qui me sera précieuse Smiley smile

Bonne journée à tous !
Salut, salut Smiley cligne ,

si tu connais d'avance la hauteur maxi de ton menu de gauche tu pourrais affecter un min-height à ta div #centre (et via un commentaire conditionnel un height équivalent pour IE < 7). Par exemple :
#centre {
...
min-height: 400px;
}
voir également Min-width, max-width, min-height et max-height sur Internet Explorer.

Si tu ne la connait pas à l'avance, un tableau fera parfaitement l'affaire Smiley langue !

Tu peux aussi jeter un oeil à cet item de la FAQ : Comment faire des "colonnes" de même hauteur ?.

A+ Smiley smile
Merci pour ta réponse Heyoan.
J'ai consulté les liens de la FAQ et j'ai pu trouvé une solution.
J'ai utilisé la méthode "table-cell:"

Encore merci et bonne fin de journée. Smiley smile
Sujet clos
Aller à