DIV: 2 hauteurs qui ne s'adaptent pas

Bonjour,

Je travaille fort sur la création d'un site internet et là, j'avoue ne plus savoir quoi faire.

J'ai créé plusieurs boîtes DIV :

1 en haut
1 autre en bas
1 centre qui en contient 2
1 bas de page

Voici le code:

 
<div id="defile" z-index:4 class="defile"">  </div>
<div id="logo" z-index:1; class="logo"">    </div>

<div id="centre" z-index:2; class="centre""> 
<div id="navigation" z-index:4; class="navigationp""> </div>
<div id="contenu" z-index:4; class="contenu""> </div> 
</div>
<div id="pied" z-index:3 class="pied"">Copyright S.T.T.L.Q. 2007</div>

Voici le contenu des CSS :

.logo {position: relative;
	height: 90px;
	width: 100%;
	left: 0px;
	background-color: #666699;}
.defile {position: relative;
	height: 20px;
	width: 100%;
	left: 0px;
	top: 0px;}
.centre {position: relative;
	min-height: 100%;
	width: 100%;
	left: 0px;
	min-height: 100%;}
.navigationp {background-color: #9999CC;
	position: relative;
	left: 0px;
	width: 21%;
	float: left;
	min-height: 100%;
	height: 100%;}
.contenu {position: relative;
	background-color: #CCCCFF;
	width: 79%;
	left: 0px;
	float: left;
	min-height: 100%;
	padding-bottom: 5px;}

.pied {background-color: #666699;
	left: 0px;
	width: 100%;
	height: 24px;
	bottom: 0px;
	clear: both;} 

Voilà, le problème est lorsque les données dans la DIV "contenu" prennent une bonne hauteur, la DIV "navigation" ne s'adapte pas. Voir le fichier en attache.

Est-ce-que quelqu'un peut m'aider ?

Merci grandement

Commence par mettre de l'ordre dans ton code html et fais ensuite une petite recherche sur les colonnes factices…

Merci Benjamin

J'ai fait un ménage de mon code (J'ai retiré les Z-INDEX etc) :

Boîtes DIV :

1 en haut
1 autre en bas
1 centre qui en contient 2
1 bas de page

Voici le code:

 
<div id="defile" class="defile"">  </div>
<div id="logo" class="logo"">    </div>
<div id="centre" class="centre""> 
<div id="navigation" class="navigationp""> </div>
<div id="contenu" class="contenu""> </div> 
</div>
<div id="pied" class="pied"">Copyright S.T.T.L.Q. 2007</div>

Voici le contenu du fichier CSS :

.logos {position: relative;
	height: 90px;
	width: 100%;
	background-color: #666699;}
.defile {position: relative;
	height: 20px;
	width: 100%;}
.centre {position: relative;
	min-height: 100%;
	width: 100%;
	background-color: #9999CC;
	overflow: auto;}
.navigationp {background-color: #9999CC;
	position: relative;
	width: 21%;
	float: left;
	height: 100%;}
.contenu {position: relative;
	background-color: #CCCCFF;
	width: 79%;
	float: left;
	padding-bottom: 7px;}
.pied {background-color: #666699;
	width: 100%;
	height: 24px;
	clear: both;}

Pour obtenir le résultat escompté, à savoir que la DIV "navigationp" donne l'impression d'avoir la même hauteur que celle du contenu (boîte "contenu), j'ai appliqué la même couleur de fond à ma boîte DIV "centre" que celle appelée "navigationp". Et ça fonctionne ! Est-ce une façon correcte de corriger mon problème ?


Merci beaucoup

Hello,

Quelques remarques :
- Il te reste des guillemets en trop dans ton code HTML
- Pourquoi donner un id et une class à tes éléments ?
- Tu as une faute de frappe entre logo (html) et logos (css)

Et pour répondre à ta question, le fait de "tricher" avec les couleurs de fond pour donner l'impression d'un design en colonne est trés bien, et c'est ce qu'il t'a été proposé avec la recherche sur les "colonnes factices"

Salut,


J'ai fait un petit ménage dans mon code :

<div id="defile" class="defile"> </div>
<div id="logo" class="logos">  </div>
<div id="centre" class="centre"> 
  <div id="navigation" class="navigationp">  </div>
  <div id="contenu" class="contenu">   </div>
</div>
<div id="pied" class="pied">  </div>

Voici le contenu du fichier CSS :

.defile {position: relative;
	height: 20px;}
.logos {position: relative;
	height: 90px;
	background-color: #666699;}
.centre {position: relative;
	min-height: 100%;
	background-color: #9999CC;
	overflow: auto;
	width: 100%;}
.navigationp {background-color: #9999CC;
	position: relative;
	width: 21%;
	float: left;
	height: 100%;}
.contenu {position: relative;
	background-color: #CCCCFF;
	float: left;
	padding-bottom: 7px;
	width: 79%;
	padding-left: 9px;}

.pied {background-color: #666699;
	height: 24px;
	clear: both;}

Le "padding-left: 9px" fonctionne parfaitement avec IE (V. 6.0.29) alors que sous Firefox, le DIV "contenu" se déplace complètement à gauche, en bas du DIV "centre". Voir le fichier en attache. Quelqu'un peut m'aider ?

Merci encore, particulièrement à ceux qui m'ont répondu.