Positionnement de div CSS3

**nekcorp** · 29/03/2014, 12h37

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 ?

**Candygirl** · 29/03/2014, 15h12

Bonjour,

Sur nav tu as un width de 200px
Sur contenu, un width de 90% + 20px

Si tu veux avoir la place qu'ils viennent côte à côte, il faudrait que 220px (200 du menu + 20 de marge) représente au maximum les 10% de la largeur à disposition. En gros cela signifie qu'ils n'y aura la place pour qu'ils viennent côtes à côte qu'à partir d'une largeur disponible de 2200px. En-dessous, ils passeront logiquement l'un en dessous de l'autre.

**nekcorp** · 30/03/2014, 22h58

Merci de cette remarque elle m'a permit de résoudre mon problème.

Positionnement de div CSS3

Positionnement en CSS

Vue hybride

Discussions similaires

Partager

Partager