Bonjour,

J'ai fait la mise en page suivante :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
67
68
69
 
<!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" xml:lang="fr" >
 
<head>
<title>Titre a definir</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" media="screen" type="text/css" title="Classic" href="style1.css" />
</head>
 
<body>
 
	<div id="principal">
 
		<div id="header">
		</div>
 
		<div id="menu">
 
			<ul>
				<a href="">Menu1</a>
				<a href="">Menu2</a>
				<a href="">Menu 3</a>
				<a href="">Menu 4</a>
				<a href="">Menu 5</a>
			</ul>
 
		</div>
 
			<div id="gauche">
 
				<div id="gauche_menu1">
					<h4>Infos</h4>
					<ul>
						<li> - Info 1 </li>
						<li> - Info 2 </li>
					</ul>
				</div>
 
				<div id="gauche_menu2">
					<h4>Articles</h4>
					<ul>
						<li> - Article 1 </li>
						<li> - Article 2 </li>
					</ul>
				</div>
 
			</div>
 
			<div id="droite">
 
				<div id="droite_edito">
					<h4>Droite</h4>Msg droite
				</div>
 
			</div>
 
			<div id="corps">Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />Texte du corps<br />suite<br />suite<br />aaa<br />
			</div>
 
 
		<div id="footer">
		</div>
 
	</div>
 
</body>
 
</html>

Et voici le CSS de cette page :

Code : Sélectionner tout - Visualiser dans une fenêtre à part
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
 
 
body
{
	background-image : url("./fond.png");
}
 
#principal
{
	position : absolute;
	width : 750px;
	left : 50%;
	margin-left : -375px;
	margin-top : 20px;
	margin-bottom : 20px;
	background-color : #eeeeee;
}
 
#menu
{
	text-align : center;
}
 
#menu a
{
	margin-left : 15px;
}
 
#corps
{
	margin-left: 150px;
	margin-right: 150px;	
}
 
#gauche
{
	position: absolute;
	left:0;
	width: 150px;
}
 
#gauche ul
{
	list-style : none;
	padding : 0;
}
 
#droite
{
	position: absolute;
	right:0;
	width: 150px;
}
Cette page est visible ici : http://www.webmaitrise.com/sylsau/test1.htm

Voici mon problème :
Dans le div principal, je mets un margin-bottom de 20px, et en bas de la page il n'y a pas de décalage de 20px qui apparait pour séparer le div principal du bas de la page.

Je ne comprends pas trop pourquoi le décalage ne se fait pas.
Est-ce que quelqu'un pourrait me dire comment je pourrais créer ce décalage ?

Merci d'avance de votre aide.

Sylvain.