Discussion :

[jbrasselet]

Bonjour,

Soit un élément div avec le css suivant :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
.Content {
	font-family: Verdana, Arial;
	background-image: url(/images/c_bg.gif);
	font-size: 12px;
	line-height: 16px;
	padding: 10px;
	color:#000000;
	text-align : justify;
	height : auto;
}

Sa hauteur dépend donc de mon contenu lorsque j'y ajoute des paragraphes <p>, des <table>.

Seulement je désires désormais y inclure plusieurs div qui contiendront queques données.

J'ai donc créé une class css pour ces div

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
.miniature {
	font-family: Verdana, Arial;
	font-size: 10px;
	height : 70px;
	width : 190px;
	border-width : 1px;
	border-style : dotted;
	border-color : #000099;
	background-color: #ccccff;
	text-align: left;
	padding-left:10px;
	float : left;
}

Mes miniatures se mettront donc les uns à la suite des autres et passent à la ligne lorsque nécessaire.

Seulement la hauteur de mon div père ne bouge pas en fonction de mes div.
Je ne comprends pas trop pourquoi.

Voici mon code HTML (et un peu de php désolé ^^)

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
 
<div class="Content">
			<?php
			while ($elt = mysql_fetch_array($liste)) {
				?>
				<div class="miniature">
					champ 1: <br />
					champ 2 : <br />
					champ 3 : <br />
					champ 4 : <br />
				</div>
 
				<?php
			}
			?>		
		</div>

Auriez-vous une idée?

Merci d'avance.

[c_s_s]

Bonjour,

En applicant un float:left sur tes miniatures, tu les fais sortir du flux normal. C'est comme s'ils n'étaient plus à l'intérieur de ton bloc #content.

Pour corriger ça, tu as deux solutions :

- Soit tu rétablis le flux normal après tes miniatures (il y a plusieurs techniques utilisant la propriété clear).

- Soit tu indiques au bloc #content qu'il ne doit pas laisser le flux normal être modifié par ses enfants.

Personnellement j'utilise souvent la deuxième solution. Il suffit dans ce cas d'ajouter un overflow:hidden; dans ton #content.

[jbrasselet]

Que dire de plus si ce n'est impeccable
Merci bien !
Je m'endormirais moins bête ce soir