Discussion :

[Toutouffe]

Bonjour,

J'ai fait pas mal de recherche sur le net pour trouver une solution a mon probleme, mais j'ai rien trouve qui ne m'allait.

J'ai plusieurs balises div qui se suivent. Et dans une des balises div (on va l'appeler containerProducts), j'ai 6 autres balises div qui ont comme propriete float:left, parceque je veux qu'elles s'affichent les une a cote des autres et pas en dessous.
Et bizzarrement FF fait comme si la balise div "containerProducts" etait vide. En gros les 6 balises avec float:left ne poussent pas la taille du div qui les contient.

Ca marche bien si je ne mets pas de float:left.
J'ai essaye de jouer avec les position:relative et les display:bloc, mais rien ne marche.... Ou alors je le fais mal

Enfin bon, voila le code :

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
<div style="width:740px;">
								<div class="titreProduits"><img src="images/products/titre_produits.jpg" /></div>
								<div class="textPresentation">
									Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Cras vulputate. Donec feugiat, enim et eleifend 									sagittis, nunc felis tristique mi, vitae pellentesque risus enim a massa.																	 								</div>
								<div class="containerProducts">
								  	<div class="produit">	
										<div class="produitPhoto"><img src="images/products/bagel.jpg" /></div>
										<div class="productType">NATURE'S GRAIN LITE</div>
										<div class="productName">BAGEL</div>
									</div>
									<div class="produit">	
										<div class="produitPhoto"><img src="images/products/muffin.jpg" /></div>
										<div class="productType">NATURE'S GRAIN LITE</div>
										<div class="productName">ENGLISH MUFFIN</div>
									</div>
									<div class="produit">	
										<div class="produitPhoto"><img src="images/products/bakers.jpg" /></div>
										<div class="productType">NATURE'S GRAIN LITE</div>
										<div class="productName">PREMIER BAKERS</div>
									</div>
									<div class="produit">	
										<div class="produitPhoto"><img src="images/products/bagel.jpg" /></div>
										<div class="productType">NATURE'S GRAIN LITE</div>
										<div class="productName">BAGEL</div>
									</div>
									<div class="produit">	
										<div class="produitPhoto"><img src="images/products/muffin.jpg" /></div>
										<div class="productType">NATURE'S GRAIN LITE</div>
										<div class="productName">ENGLISH MUFFIN</div>
									</div>
									<div class="produit">	
										<div class="produitPhoto"><img src="images/products/bakers.jpg" /></div>
										<div class="productType">NATURE'S GRAIN LITE</div>
										<div class="productName">PREMIER BAKERS</div>
									</div>
								</div>
								<div class="containerFooter">	
									<table border="0" cellspacing="0" cellpadding="0" width="100%">
										<tr>
											<td width="25%" class="footer"><b>PREMIER BAKERS<br />
												10491 West Battaglia Road<br />
										  Casa Grande, Arizona  85222</b></td>
											<td width="44%" class="footer"><img src="images/logos.jpg" width="281" height="41" /></td>
											<td width="31%"><div class="fsb2"><br /><br /><br /><br />A Fresh Start Bakeries Company</div></td>
										</tr>
									</table>
								</div>
							</div>

Et voila le 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
div.titreProduits{
	padding: 15px 0px 0px 34px;
}
 
div.textPresentation{
	width: 422px;
	margin: 24px 0px 0px 34px;
}
 
div.containerProducts{
	width: 740px;
	float: none;
}
 
div.produit{
	line-height: 170px;
	width: 185px;
	height: 170px;
	margin: 44px 0px 0px 44px;
	float: left;
	display: inline;
}
 
div.produitPhoto{
	width: 185px;
	height: 139px;
	background-image: url(../images/products/cadre_produit.jpg);
}
 
div.produit img{
	margin: 7px 0px 0px 30px;
}
 
div.containerFooter{
	width: 740px;
	margin: 30px 0px 0px 0px;
}

le div qui ne se place pas bien est donc le div "containerFooter" puisqu'il se trouve en dessous de "containerProducts" qui est considere comme vide par firefox.

Au fait, je sais que pas propre de faire des divs avec une seule information dedans, mais pour l'instant le probleme n'est pas la...

Merci

[Candygirl]

Hello,

c'est un problème qui revient assez souvent. Tu trouveras une explication et des pistes, par exemple, ici:
http://www.developpez.net/forums/sho...39&postcount=9

[Toutouffe]

Merci beaucoup, c'est niquel !

Pour mon cas, il m'a suffit donc d'utiliser la fonction clear sur mon div footer.....

Merci encore ca me sauve