Le background du conteneur disparait lorsque enfants sont en float [Résolu]

[misakilou]

Bonjour,
Voila une div général avec un background qui contient 2 div ( une en float left et l'autre en right ) le problème est que l orsque je passe l'une des div en float le background disparait

html

Code :

1
2
3
4
5
6
7
8
9
10
11
			<div id = 'content_offre'>
				<div id = 'pic_offre'>
					<img src="img/Nemo01.jpg">
				</div>
				<div id = 'content_desc_offre'> 
					<div id = 'title_offre'>TITLE</div>
					<div id = 'reduc_offre'>reduc</div>
					<div id = 'redict_offre'>2B</div>
					<div id = 'desc_offre'></div>
				</div>
			</div>

et le css

Code :

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
 
#content_offre{
	width:520px;
	padding: 20px 20px 20px 20px;
	background-color:gray;
 
}
#content_desc_offre{
	width:345px;
	float:right;
}
 
 
#pic_offre img{
	display:block;
	float:left;
	width:164px;
 
}
 
#title_offre{
 
	width:315px;
	height:50px;
	text-align:center;
}
 
#reduc_offre{
	float:left;
	background-color:red;
	width:110px;
	height:50px;
	margin-left:20px;
	margin-right:20px;
}
 
#redict_offre{
	float:left;
	background-color:yellow;
	width:150px;
	height:54px;
}
 
#desc_offre{
	display:block;
	width:315px;
	margin-left:20px;
}

et voila le résultat
http://imageshack.us/photo/my-images/825/sansredy.png/

[12monkeys]

Bonjour

Ceci est un comportement normal. Voici un tutoriel pour résoudre ce problème : http://css4design.developpez.com/tut...flux-partie-2/

Mets un overflow:hidden sur ton conteneur.

[eckerdecker]

Je ne connais pas cette technique avec l'overflow:hidden sur le conteneur (je suis donc allé voir le lien que tu donnes 12monkeys) je ne suis pas un adepte des hacks css et feuilles ie-specific aussi je recommande l'utilisation du clear:both, qui a l’intérêt d'être cross-browser et qui surtout n'existe que dans ce but : rompre un flux d'éléments flottants et au passage rendre sa consistance au conteneur.
Grossièrement ça donne.

Code :

1
2
3
4
5
6
7
8
9
10
11
12
			<div id = 'content_offre'>
				<div id = 'pic_offre'>
					<img src="img/Nemo01.jpg">
				</div>
				<div id = 'content_desc_offre'> 
					<div id = 'title_offre'>TITLE</div>
					<div id = 'reduc_offre'>reduc</div>
					<div id = 'redict_offre'>2B</div>
					<div id = 'desc_offre'></div>
				</div>
				<div style="clear:both"></div>
			</div>

Je le concède, cela ajoute une balise html. Mais dans le cas où l'élément clear est susceptible d'accueillir du contenu (un footer par exemple) l'inconvénient n'existe plus.

Note : je ne comprends pas bien le propos de ce tuto, qui semble dire que la propriété clear est archaïque, si c'est vraiment le cas qu'on m'explique.

[misakilou]

j'ai utilisé ta methode avec le clear:both , et sa marche très bien

Merci

[12monkeys]

Oui "l'ancienne méthode" est expliquée ici : http://css.developpez.com/tutoriels/...issement-flux/

Maintenant la méthode overflow ne me semble pas être un hack et je n'ai jamais eu de souci de compatibilité avec. Après tout dépend de ce qu'on veut faire : si on ne veut pas rajouter un balise inutile on peut parfaitement utiliser cette méthode...