div qui ne s'adapte pas à la taille de l'image contenue

Invité · 24/05/2009, 22h11

Bonjour,
tout est dans le titre :
--> div qui ne s'adapte pas en hauteur à la taille de l'image contenue !

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>....</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<!-- scripts - debut -->
<style type="text/css">
<!--
html
{
	background-color:#F0F0F0;
	/* ------- texte -------- */
	font-family: "Tahoma", Arial, sans-serif;
	color: #000000;
	font-size: 10pt;
	text-align: left;
	text-decoration: none;
}
/* -------------- IMAGES ---------------- */
.imageG
{
	float: left;
	margin-right: 20px;
}
/* ------------- affichage -------------- */
.news_liste {
	width: 60%;
	border-collapse: collapse;
	border: 2px solid #CCCCCC;
	margin: auto;
	background-color: #FFFFFF;
}
.news_entete {
	height: 25px;
	background-color: #E1F0FF;
}
.news_titre {
	padding: 5px;
	float: left;
	text-align: left;
	color: #3B4E77;
	font-weight: Bold;
}
.news_date {
	padding: 5px;
	float: right;
	text-align: right;
}
.news_contenu {
	padding: 5px;
	text-align: left;
}
/* -------------------------------------- */
-->
</style>
 
<!-- scripts - fin -->
</head>
 
<body>
<center>
 
<br />
 
	 <div class="news_liste">
		 <div class="news_entete">
			 <span class="news_titre">contenu 11</span>
			 <span class="news_date"> le 24/05/2009 à 20h44</span>
		 </div>
		 <div class="news_contenu">
 
			 <img src="../news_photos/7_100_0226.JPG" alt="" class="imageG" />qsdf  
				qsdfqdf qsfsdfg dgsdfg dqsdf sdfgs dgsd ?<br /><br />
 
				qssdfg sdfgsdfgs dgsdfg g sddfg dgfgsdfgs ddf sdfs<br />
				qdfqdf qsd sdfgsddfgsdf sdffqsdf.
		 </div>
	 </div><br />
	 <div class="news_liste">
		 <div class="news_entete">
			 <span class="news_titre">contenu 22</span>
			 <span class="news_date"> le 24/05/2009 à 20h42</span>
 
		 </div>
		 <div class="news_contenu">
			 <img src="../news_photos/6_Capt-2323531.jpg" alt="" class="imageG" />qsdf qsd 
				fqdf qsfdqsdf sdfgs dgssdfgd ?<br />
				qsdf sdfsqdfqdf qsdfqsdf.
		 </div>
 
	 </div><br />
 
</center>
</body>
</html>

Où est l'erreur ?

Merci.

**Macmillenium** · 24/05/2009, 22h22

Bonsoir,

C'est un comportement standard.
Le conteneur .news_contenu ne s'adapte pas à la hauteur de son enfant flottant img retiré du flux normal (uniquement par rapport à son conteneur parent).
Il faudrait conférer à .news_contenu un nouveau contexte de formatage block (specs CSS2.1) afin d'englober ces enfants.

Un overflow:hidden sur .news_contenu fera l'affaire.

Une discussion plus détaillée sur le sujet.

Invité · 24/05/2009, 22h33

"Dites moi pas qu'c'est pas vrai !!!"

Merci Macmillenium !
D'abord pour etre là un dimanche soir, et avoir répondu si vite !
Et pour la pertinence de ta réponse :

Code :

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

1
2
3
4
5
.news_contenu {
	overflow: hidden;
	padding: 5px;
	text-align: left;
}

Ca marche !

Bonne soirée

div qui ne s'adapte pas à la taille de l'image contenue

CSS

Vue hybride

Discussions similaires

Partager

Partager