Retour à la ligne du conteneur de div en float

**oblik** · 01/12/2007, 12h16

Bonjour,

Je vous fait par de mon soucis pour l'affichage de produit dans un catalogue.

(voir l'image en pj)

- Le conteneur a une largeur fixe;
- Il contient quatre div "famille" qui sont les familles de produit, en float left;
- Les div "famille" contiennent des div "produits" de largeur fixe, en float left aussi;
- Le nombre de famille et de produit à l'intérieur est dynamique donc considéré comme aléatoire.

Sous Firefox le rendu est celui souhaité, c'est à dire possibilité d'avoir 2 familles de produit cote à cote si elles sont courte, et un retour à la ligne si il y a trop de produit à l'interieur... mais sous IE6/7 le bloc s'allonge à la verticale .

J'ai beau essayé je ne trouve pas, je fait donc appel à la communauté.

Voici le code source :

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html><head><title>Test</title>
 
 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
 
<style type="text/css">
 
 
 
#container {
 
display:table;
 
background:#ddd;
 
width:600px;
 
}
 
 
 
.famille {
 
float:left;
 
margin:10px;
 
background:#666;
 
}
 
 
 
.produit {
 
float:left;
 
margin:10px;
 
width:100px;
 
height:100px;
 
background:#ccc;
 
}
 
 
 
</style>
 
 
 
</head>
 
 
 
<body>
 
<div id="container">
 
 
 
	<div class="famille">
 
		<div class="produit"></div>
 
		<div class="produit"></div>
 
		<div class="produit"></div>
 
		<div class="produit"></div>
 
	</div>
 
 
 
 
 
	<div class="famille">
 
		<div class="produit"></div>
 
		<div class="produit"></div>
 
		<div class="produit"></div>
 
	</div>
 
 
 
	<div class="famille">
 
		<div class="produit"></div>
 
		<div class="produit"></div>
 
	</div>
 
 
 
	<div class="famille">
 
		<div class="produit"></div>
 
		<div class="produit"></div>
 
	</div>
 
 
 
</div>
 
</body>
 
</html>

Je reste à votre disposition

**Bisûnûrs** · 01/12/2007, 13h26

Mets un clear:both à ta classe famille.

**oblik** · 01/12/2007, 13h47

Si je met un clear:both a mon div famille, je n'ai plus possibilité d'avoir 2 familles de produit cote à cote si elles sont courte

**MasterOfChakhaL** · 01/12/2007, 13h49

Salut,

Le clear both n'ira pas puisque s'il y a la place, il faut pouvoir afficher plusieurs familles sur la même ligne.

Le problème, c'est qu'avec le float, l'élément cherche à se caler à gauche. L'algorithme qu'utilise IE à tendance a caler un maximum de chose sur la même ligne, ce qui fait qu'en bout de ligne, s'il ya la place de mettre un produit, alors ils se mettront en colonne pour cette famille.

Déjà qu'IE a du mal avec les floats, si en plus on les imbrique...

Donc la résolution de ton problème passe par le fait qu'il faut absolument imposer que les produits d'une famille se calent sur une même ligne.

Il y a surement mieux comme solution, mais mes essais ont été infructueux. Le seul truc que je peux te proposer est de mettre tes produits dans un tableau d'une ligne. (même si ca n'est pas satisfaisant d'un point de vue sémantique...)

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 
<html><head><title>Test</title>
 
 
 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 
 
 
<style type="text/css">
 
 
 
#container {
 	background:#ddd;
	width:600px;
}
 
.famille {
	float: left;
	margin:10px;
	background:#666;
}
 
 
 
.famille div {
	display: block;
	width:100px;
	height:100px;
	margin:10px;
	background:#ccc;
 
}
</style>
</head>
<body>
<div id="container">
	<div class="famille">
		<table>
			<tr>
				<td><div></div></td>
				<td><div></div></td>
				<td><div></div></td>
				<td><div></div></td>
			</tr>
		</table>
	</div>
	<div class="famille">
		<table>
			<tr>
				<td><div></div></td>
				<td><div></div></td>
				<td><div></div></td>
			</tr>
		</table>
	</div>
	<div class="famille">
		<table>
			<tr>
				<td><div></div></td>
				<td><div></div></td>
			</tr>
		</table>
	</div>
	<div class="famille">
		<table>
			<tr>
				<td><div></div></td>
				<td><div></div></td>
			</tr>
		</table>
	</div>
 
</div>
</body>
</html>

**Bisûnûrs** · 01/12/2007, 13h53

Si le clear:both ne convient pas et si tes familles ne sont pas générées dynamiquement, tu peux essayer de mettre une largeur à chacune de ces familles, correspondant à la somme des produits inclus dans chacune.

Et si elles sont générées dynamiquement et si tes produits ont toujours la même taille, peut-être calculer la largeur dynamiquement aussi.

**oblik** · 01/12/2007, 14h04

Envoyé par Bisûnûrs

Si le clear:both ne convient pas et si tes familles ne sont pas générées dynamiquement, tu peux essayer de mettre une largeur à chacune de ces familles, correspondant à la somme des produits inclus dans chacune.

Et si elles sont générées dynamiquement et si tes produits ont toujours la même taille, peut-être calculer la largeur dynamiquement aussi.

Le nombre de famille et de produit à l'intérieur est dynamique donc considéré comme aléatoire, je l'avais ecrit dans l'intitulé.
Sinon calculer la largeur dynamiquement, c'est au dessus de mes capacités

Merci pour vos réponses si rapides

**Bisûnûrs** · 01/12/2007, 14h18

Comme tes produits ont une largeur fixe de 100px avec une marge horizontale fixe de 20px en tout, on peut donc en conclure, que pour 2 produits par exemple, la famille fera 280px.

Donc dans ta boucle qui génère les familles, tu comptes le nombre de produits, et en PHP (par exemple), tu fais

Code php :

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

$widthFamille = $nbProduit * 140;

Et dans ta balise famille :

Code php :

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

<div class="famille" style="width:<?php echo $widthfamille; ?>px;">

Retour à la ligne du conteneur de div en float

Tableau en CSS

Vue hybride

Discussions similaires

Partager

Partager