18041 sujets

Questions générales et questions de débutants

Pb de blocs CSS

Bonjour,

Je débute ds la mise en page CSS.
J'ai une page classique avec un bloc global qui contient ses trois enfants : header, main, et footer.

Le problème est le suivant : le footer se positionne juste au dessous du header par dessus le main... et la taille du main ne s'allonge pas toujours avec le contenu de ses enfants (2 colonnes left et right qui peuvent avoir des tailles différentes).

Voilà le code :

/* @group Main Blocs */

#global {
	margin: 0 auto;	
	padding: 0;
	position: relative;					
	min-height: 100%;
	width: 1000px;
}

#header {
	background: url(/images/styles/front/header.gif) no-repeat;	
	height: 120px;
	width: 1000px;
	position: relative;
}

#main {
	background: url(/images/styles/front/main_repeat.gif) repeat-y;
	margin: 0;					
	width: 1000px;
	padding-left: 50px;
	padding-right: 50px;
	height: relative;
	position: absolute;
}

#footer {
	background: url(/images/styles/front/footer.gif) no-repeat;
	height: 100px;
	width: 1000px;
	font-size: 1em;
	line-height: 6.7em;
	color: #ffffff;
	text-align: center;
	font-weight: normal;
	position: relative;
}

/* @group Secondary Blocs */

#left {
	float: left;
	width: 475px;
}

#right {
	float: right;
	width: 400px;
}


J'ai essayé plein de choses différentes au niveau de la position relative ou absolue des blocs, et de la hauteur (relative, 100%... etc), mais rien ne change.

Voilà le html :

<div id="global">
	
	<!-- header -->
	<div id="header">
	</div>
  
	<!-- main -->
	<div id="main">
          <div id="left"></div>
          <div id="right"></div>
	</div>
	
	<!-- footer -->
	<div id="footer"></div>
  
</div>


Quelqu'un peut-il m'aiguiller ?
Merci
Modifié par oxitan (22 Dec 2006 - 16:30)
un cas très classique, je te conseille un peu de lecture pour bien comprendre le comportement des blocs flottants.

dans ton cas, tu peux par exemple :

- enlever le position:absolute de #main
- virer le height:relative qui ne veux rien dire
- placer le bloc #footer dans #main et lui appliquer un clear:left, il se positionnera alors toujours en dessous des blocs #left et #right.

voilà
@ MrPatate
J'ai essayé ta technique mais ça ne change rien au pb, le #footer écrase tjs le #main.

@Raphael
Si j'ajoute un "overflow:auto" à mon conteneur #main, le footer reprend bien sa position (je l'avais déjà testé) mais je me retrouve avec un scroll dans la page (le #main n'est pas étendu par ses 2 fils #right et #left)...
Administrateur
oxitan a écrit :
@ MrPatate
J'ai essayé ta technique mais ça ne change rien au pb, le #footer écrase tjs le #main.

Je ne crois pas que tu aies appliqué à la lettre ce que t'a conseillé MrPatate, à mon avis, tu n'as pas placé le footer dans le bloc main.
Si si, j'ai appliqué à la lettre sa solution, mais le #footer était toujours en haut, cependant, on voyait qu'il était bien inclus ds le #main puisqu'il était plus décalé vers la droite.
Cependant, je ne souhaite pas que le #footer (avec une bg image) soit fils du #main car ce dernier contient aussi une bg image qui se répète...
Actuellement, j'ai tjs un scroll ds le main du à l'overflow de ce dernier (au lieu d'augmenter la taille du #main en hauteur).

En attendant une éventuelle réponse, bon w-e et joyeux noël. Smiley cligne
Sujet clos
Aller à