Bonjour,

Voilà j'ai une question sur le positionnement en CSS sur les <div>.

Voici ma page html qui se constitue d'une entête d'une barre de navigation et d'un contenu.

Code html : 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
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <meta http-equiv="Content-Language" content="fr" />
 <title>Squelette</title>
 <link rel="stylesheet" type="text/css" href="forme.css" media="all" />
</head>
<body>
<div id="conteneur">
 
	<div class="entete"> ENTETE </div>
 
	<div class="navigation"> NAVIGATION 
 
		<ul>
			<li><a href="index.html">Titre1</a></li>
			<li><a href="index.html">Titre1</a></li>
			<li><a href="index.html">Titre1</a></li>
			<li><a href="index.html">Titre1</a></li>
			<li><a href="index.html">Titre1</a></li>
			<li><a href="index.html">Titre1</a></li>
			<li><a href="index.html">Titre1</a></li>
			<li><a href="index.html">Titre1</a></li>
			<li><a href="index.html">Titre1</a></li>
		</ul>
	</div>
 
	<div class="contenu"> CONTENU 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
 
		<figure>
			<img alt="" src="pictures/picture_1.png" />
			<figcaption>Légende</figcaption>
		</figure>
	</div>
 
</div>
 
</body>
</html>

Et voici mon CSS pour positionner tout ça

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
 
body{
	background: #000000;
}
.entete {
	background: #00FF00;
	height: 50px;
}
 
.navigation {
	background: #00FFFF;
	width: 200px;
	float: left;
}
 
.contenu {
	background: #FF0000;
	width:900px;
	float: left;
	margin-right: 20px;
}
 
.contenu figure {
	margin: 20px;
	float: left;
}
 
.contenu img {
	width: 150px;
	height: 200px;
}
 
.contenu figcaption {
     text-align: left;
     color: white;
     font-size: 0.8em;
}
J'utilise float left sur ma barre de navigation ainsi que sur mon contenu pour qu'ils soient l'un à coté de l'autre. Le problème vient quand je demande à ce que mon contenu ait une largeur de 90%.

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
 
.contenu {
	background: #FF0000;
	/*width:900px;*/
        width:90%
	float: left;
	margin-right: 20px;
}
Lorsque je passe width à 90% et non plus en pixels le contenu vient se caller en dessous de ma barre de navigation et non plus sur la droite.

Quelqu'un aurait une explication ?