Div bloqué, non élastique.

**sibile** · 14/05/2010, 20h59

Bonsoir,

Je ne comprend pas pourquoi mon div conteneur conserve toujours la même hauteur sans s' agrandir à mesure que son contenu se remplit.

Il n' est pas élastique mais garde toujours la même hauteur, c' est très gênant.
Je suppose que ça vient d' un problème de flux mais je n' y comprend rien.

Vous pouvez voir le bug ici:

http://www.chocolatine-web.com/ossature.html

Voici mon code 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
<div id="page">
<!--Articles-->
 
 
<div id="col_gauche">
<!--une colonne d' articles ( 5 maximum )-->
<!--Séparation droite/gauche-->
	<div class="article">
	<!--Un article-->
	<table>
		<tr>
			<td class="img"><img src="articles/kitty.jpg" alt="photo article" title="photo article" /></td>	
			<td class="description">
				<span class="titre_article">
				Coussins HELLO KITTY
				</span>
				<div class="texte"> Lot de deux coussins 25*15 cm.
				</div>
				<span class="prix"> 5,00 &euro;</span>
				<div class="detail"><select><option>rose</option><option>bleu</option></select>
					<span class="panier">Ajouter au panier</span>
				</div>
			</td>
			</tr>
		</table><!--Fin description-->
 
	</div><!--Fin article-->
 
 
 
 
	<div class="article">
	<!--Un article-->
	<table>
		<tr>
			<td class="img"><img src="articles/kitty.jpg" alt="photo article" title="photo article" /></td>	
			<td class="description">
				<span class="titre_article">
				Coussins HELLO KITTY
				</span>
				<div class="texte"> Lot de deux coussins 25*15 cm.
				</div>
				<span class="prix"> 5,00 &euro;</span>
				<div class="detail"><select><option>rose</option><option>bleu</option></select>
					<span class="panier">Ajouter au panier</span>
				</div>
			</td>
			</tr>
		</table><!--Fin description-->
 
	</div><!--Fin article-->
 
 
 
 
 
</div><!--Fin col_gauche-->
 
<div id="col_droite">
<!--une colonne d' articles ( 5 maximum )-->
</div>
 
</div><!--Fin page-->

Et mon code 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
 
 
#page {
margin:0 100px 50px 100px;
padding:15px 0;
background-color:black;
min-height:400px;
}
div#titre  {
margin:0 auto;
text-align:center;
/*border:1px solid black;*/
margin-top:10%;
width:800px;
}
div#col_gauche {
width:50%;
border-right:5px dashed white;
min-height:400px;
float:left;
padding:0 15px;
}
 
div#col_droite {
width:50%;
min-height:400px;
padding:0 15px;
}
 
div.article {
min-height:200px;
border-bottom:5px dashed white;
padding:10px 0;
}
td.img {
padding:10px;
width:200px;
}
td.img img {
width:200px;
}
td.description {
padding:10px;
vertical-align:top;
}
span.titre_article {
padding:5px;
background:white;
color:fuchsia;
font-weight:bold;
}
div.texte{
padding:10px 0;
margin-bottom:10px;
color:white;
font-size:14px;
min-height:100px;
}
span.prix {
color:yellow;
}
div.detail{
padding-top:5px;
}
span.panier {
color:fuchsia;
text-decoration:underline;
float:right
}