Footer qui ne bouge pas [Résolu]

[baggie]

Bonjour,

mon problème est assez simple à comprendre il me semble, mais je galère pour trouver la solution
Mon site est construit de cette manière :

Code :

1
2
3
4
5
6
7
 
<div id="header"></div>
<div id="milieu">
     <div id="menu_general"></div>
     <div id="contenu"></div>
</div>
<div id="footer"></div>

Mon problème : quand le div #contenu s'agrandit, le #footer ne reste pas dessous mais reste collé en bas du navigateur (comme s'il était à position: fixed, avec bottom:0).
Ce qui fait que mon div #contenu passe en dessous du div footer quand il s'agrandit. (On a donc une scrollbarre qui apparaît, on peut descendre jusqu'en bas du div #contenu, alors que le div #footer reste plus haut).

Voici mon code CSS associé :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
#milieu {
	/*float: left;
	position: relative;
	width: 100%;*/
	color: #FFF;
	width: 100%;
	top: 0px;
	bottom: 10px;
	right: 0px;
}
 
#menu_general {
	background: #6b587e;
	padding: 5px;
	width: auto;
	height: auto;
	float: left;
	position: relative;
	margin-top: 170px;
}
 
#contenu {
	float: left;
	margin-top: 170px;
	margin-left: 30px;
	background: #6b587e;
	width: 70%;
	height: auto;
	border-radius: 5px;
	padding: 5px;
}
 
#header {
/*	position: absolute;
*/	background: #8C7AA4;
	color: #FFF;
	font-weight: bold;
	/*left: 0px;
	top: 0px;
	height: 50px;*/
	width: 100%;
	border-style: none;
	position: absolute;
	left: 0px;
	top: 0px;
	height: 50px;
	width: 100%;
}
 
#footer {
	position: absolute;
	background: #8C7AA4;
	color: #FFF;
	font-weight: bold;
	/*left: 0px;
	bottom: 0px;
	height: 50px;
	width: 100%;
	border-style: none;
	position: absolute;*/
	left: 0px;
	height: 50px;
	width: 100%;
	bottom: 0px;
}

Les diverses lignes en commentaire sont des tests que j'ai pu faire, mais là j'en ai tellement fait que je suis un peu perdue

Donc si vous pouviez m'aider ...

Une petite image pour éventuellement mieux comprendre.

[Bisûnûrs]

Tu peux enlever le position:absolute.

Je te conseille en outre la lecture de cet article :
http://pbnaigeon.developpez.com/tuto...e-en-page-CSS/

[baggie]

Merci beaucoup c'est beaucoup mieux

Juste un dernier petit détail : comment puis-je faire pour que mon footer soit collé sur les bords gauche et droite ? (et sur le bas de la page ?)

Voici ma css du footer :

Code :

1
2
3
4
5
6
7
8
9
10
 
#footer {
	background: #8C7AA4;
	color: #FFF;
	font-weight: bold;
	left: 0px;
	height: 50px;
	width: 100%;
	clear: both;
}

Je pensais que le width et le left auraient suffi mais apparemment non

[Bisûnûrs]

En théorie le width:100% devrait suffire, si d'après le code dans ton premier message le footer est directement enfant du body.
Après, il faut évidemment supprimer les marges du body avec un margin:0.

[dominos]

Par défaut left vaut 0, cette ligne n'est donc utile.

[baggie]

Merci c'est tout bon ! J'ai enlevé le left et rajouté le margin: 0 !