Les div imbriqués

**wperle** · 30/04/2013, 22h54

Bonjour tout le monde,

J'ai un div parent qui le contenant et div fils, le problème qui se pose c'est si je ne spécifie pas la hauteur du div parent. Ce dernier affiche une hauteur minime c'est comme il ne contient pas les div fils.

Merci pour aide.

**rodolphebrd** · 01/05/2013, 12h58

Bonjour,

merci d'envoyer du code car on peine à vous comprendre.

**wperle** · 01/05/2013, 13h30

Merci pour ta réponse, ci-dessous mes fichiers css et html

default.css

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
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
body {
  background-color:#DCD4C7; /* Fond de page bleu clair */
  margin: 0px; /* Supprimer toute marge à la page : le texte colle les bordures */
 
}
 
#wrapper{ 
	margin-left: 10%;
	/*margin: 0px auto 0px auto;*/
	width:85%;
}
#header{
	height:100%;
	background: #F2F2F2;
	padding:7px 20px;
	/*text-align: center;*/
	color: #3a5976;
}
 
#navbar{
	margin: 0px;
	padding:0px;
	height: 30px;
	background-color: #D25F08;
	/*background-color:  #F2F2C2;*/
 
}
#navbar ul {
	margin: 0px;
	padding:0px;
	line-height: 30px;
	/*width: 200px;*/
 
}
#navbar li {
	margin: 0px;
	padding:0px;
	list-style: none;
	float: left;
	position:relative;
	/*background-color:  #F2F2C2;*/
 
}
 
#navbar ul li a{
	text-align: center;
	font-family: "arial, verdana", cursive;
	text-decoration: none;
	width: 100px;
	display:block;
	color: #FFF;
 
}
#navbar ul li:hover{
	background-color: #948E88;
	border: #D25F08 1px dotted;
}
 
#content{
	position:relative;
	background-color:#FFFFFE;
	padding:7px 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
	min-height:1000px;
}
#content{
	position:relative;
	background-color:#FFFFFE;
	padding:7px 20px;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 12px;
 
}
 
#article_div{
	position:relative;
	background-color: #FFF;
	width: 100%;
	height:100%;
	clear: both;
}
 
#slide_show{
	position:relative;
	background-color: #FFF;
	width: 100%;
	height:100%;
	clear: both;
}
 
 
#content img{
 
	padding-bottom:10px;
}
p{
 
	text-align: justify;
	margin-top: 18px;
}
h1{
	text-align: center;
}
.post{
	float:right;
	margin: 5px;
	}
.logo{
	float:left;
	margin-left: 0px;
	margin-top: 0px;
	margin-bottom: 15px;
	}
 
#tour {
	position:relative;
	float:left;
	width:30%;
	background:#F2F2F2;
	text-align: justify;
	padding: 12px 12px;
}
#biodome {
	float:left;
	position:relative;
	width:32%;
	background:#FEFBFB;
	text-align: justify;
	padding: 13px 13px;
}
#vieuport{
	float:left;
	position:relative;
	width:30%;
	background:#F2F2F2;
	text-align: justify;
	padding: 12px 12px;
}
#suite {
	float:left; 
 
 
 
}
.tourimage{
 
	display: block; 
	margin-left: auto; 
	margin-right: auto;
	margin-top: 10px;
}
#footer{
	float:left;
	width:100%;
	padding-top:2px;
	padding-bottom: 2px;
	padding-left: 5px;
	background: #F2F2F2;
	text-align:center;
	font-family:'Century Gothic', sans-serif;
	font-size: 12px;
}

toronto.html

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
 
 
<head>
    <title>Tourisme : Montréal</title>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>
	<link rel="stylesheet" type="text/css" href="../css/default.css"/>
</head>
 
 
<body>
 
	<div id="wrapper">
		<div id="header"><!-- beginning of header -->
		<img src="../images/logo_tourisme.gif" alt="tourisme" title="tourisme" class="logo"/>
			<h1> Tourisme : Toronto </h1>
 
			<div id="navbar"><!-- beginning of menu -->
			      <ul>
			      		<li><a href="../index.htm">Index</a></li>
				        <li><a href="montreal.htm">Montréal</a></li>
				        <li><a href="quebec.htm">Quebec</a></li>
				        <li><a href="toronto.htm">Toronto</a></li>
			      </ul>
		    </div><!-- End of menu -->
 
		</div><!-- End of header -->
 
 
 
	    <div id="content"><!-- beginning of content -->
	    	<img src="../images/toronto_bandeau.jpg" width="100%" height="100%"  alt="Toronto" title="Toronto"/>
	    	<p>
				Au coeur d'une architecture étonnante et moderne, un esprit créatif unique fleurit dans cette ville cosmopolite. Au travers de ses festivals de renommée mondiale, de ses événements et de ses espaces célébrant le patrimoine, l'art, les sciences et le théâtre, Toronto vous emmène dans son élan culturel éclectique.	
 
	    	</p>
 
			<h2>
				Les incontournables de Toronto
			</h2>
 
			<div id="tour">
				<i><strong style="color:#D25F08">
					Royal Ontario Museum</strong></i><br/>
					Le Musée Royal de l'Ontario est le plus grand musée canadien de cultures du monde et 
					d'histoire naturelle. Explorez les expositions 
					temporaires, les galeries permanentes sur les 
					dinosaures, l'Égypte ancienne et plus. Situé au 
					cœur de Toronto, ce musée à l'architecture 
					dentelée est une attraction à ne 
					pas manquer.
 
				<img src="../images/ontario-science-centre.jpg" width="90%" height="90%"  alt="Ontario" title="Ontario" class="tourimage"/>
			</div>
			<div id="biodome">
				<i><strong style="color:#D25F08">
				Théâtre et arts du spectacle</strong></i><br/><img src="../images/toronto-centre-for-the-arts.jpg" width="90%" height="90%"  alt="centre des arts à Toronto" class="tourimage"/>
				Les théâtres de Toronto proposent un large éventail de spectacles, du festival de théâtre Fringe aux Tony Awards, en passant par des pièces de théâtre au style musical de Broadway, des opéras et des ballets. Lorsque le rideau tombe sur l'un de nos spectacles, Toronto reçoit une ovation bien méritée. Découvrez les spectacles à voir à Toronto.
 
 
			</div>
 
			<div id="vieuport">
				<i><strong style="color:#D25F08">
				Nature et science à Toronto</strong></i><br/>
				On compte  plus de 300 instituts de recherche de pointe - dont le prolifique Discovery District qui abrite des centres de santé et de science de renommée mondiale. Vous pourrez explorer les merveilles de la nature au Zoo de toronto, et vous remuer les neuronnes au Centre des sciences de l'Ontario.
				<img src="../images/zoo1.jpg" width="90%" height="90%"  alt="Zoo" title="Zoo" class="tourimage"/>
 
			</div>
 
 
 
 
	    </div><!-- End of content -->
 
 
	    <div id="footer"><!-- beginning of footer -->
 
	      <p>
	      	source de texte et images: <a href="http://www.seetorontonow.fr/arts-science.html">
	      	http://www.seetorontonow.fr/arts-science.html
	      </a>
	      <br/>
 
	       Tous droit réservé - 2013</p>
	        <p>
		   		 <a href="http://validator.w3.org/check?uri=referer">
		    		<img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88"/>
		   		 </a>
				&nbsp;
				 <a href="http://css-validator.org/check/referer">
				    <img style="border:0;width:88px;height:31px"
				        src="http://css-validator.org/images/vcss-blue.png"
				        alt="Valid CSS!" />
				 </a>
			</p>
	    </div> <!-- End of footer -->
 
 
	</div> <!-- End of wrapper -->
 
</body>
</html>

**rodolphebrd** · 01/05/2013, 16h16

Vous pouvez ajouter cela pour voir:

Code css :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
#content:after{
	content:"";
	display:block;	
	clear:both;
}

**wperle** · 01/05/2013, 20h45

Merci beaucoup, c'est la bonne solution.

Les div imbriqués [CSS 2]

CSS

Vue hybride

Discussions similaires

Partager

Partager