Float / div parent.

**rikemSen** · 27/05/2009, 18h47

Bonsoir,

J'ai eu un probleme de taille automatique avec une div. Celle ci ne se redimensionnait pas selon la taille des divs enfantes. (Sous FF mais pas sous IE)

Après quelques recherches, j'ai pu trouver que la div parente ne s'adapte pas à la taille de ses divs enfantes si elles sont en float.

J'ai testé l'astuce du HR, qui dans mon cas, ne marche pas (à moins que je sois totalement nul, ce qui est possible).

Les <br>s, c'est normal.

Code html :

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
<html>
<head>
<LINK rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
 
<div id="content-parent">
  <div id="content-child">
 
    <div id="head-hight"></div>
 
    <div id="head-low">s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br></div>
 
    <div id="page">
 
      <div id="left-content">
        <div id="vid-left-content">
          <div id="fullsize-vid-left-content"></div>
          <div id="minsize-vid-left-content">
            <div class="min-vid-left-content"><img src="./min.JPG"></div>
            <div class="min-vid-left-content"><img src="./min.JPG"></div>
            <div class="min-vid-left-content"><img src="./min.JPG"></div>
            <div class="last-min-vid-left-content"><img src="./min.JPG"></div>
          </div>
        </div>
      </div>
 
      <div id="right-content">
        <div class="block-right-content">lol</div>
        <div class="block-right-content">lol</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

Code css :

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
html{
  margin:0px;
  padding:0px;
}
 
body{
  margin:0px;
  padding:0px;
 
  background-color:#333333;
  font-size:12px;
  font-family:Arial,Helvetica,sans-serif;
  color:#000000;
  text-align:center;
}
 
#content-parent{
  width:1000px;
  background-color:#333333;
  border-left:1px solid white;
  border-right:1px solid white;
  margin:auto;
  text-align:center;
}
 
#content-child{
  width:944px;
  margin:auto;
  border-left:1px solid white;
  border-right:1px solid white;
  text-align:left;
}
 
#head-hight{
  width:944px;
  height:70px;
  background-color:white;
}
 
#head-low{
  width:944px;
  height:auto;
  background-color:red;
 
}
 
#page{
  background-color:yellow;
  width:944px;
  height:auto;
}
 
#left-content{
  margin-left:11px;
  width:611px;
  height:490px;
  margin-top:11px;
  background-color:transparent;
}
 
#vid-left-content{
  width:611px;
  height:395px;
  background-color:#666666;
 
}
 
 
#fullsize-vid-left-content{
 float:left;
 width:480px;
 height:385px;
 margin-top:5px;
 margin-left:5px;
 background-color:#CCCCCC;
}
 
#minsize-vid-left-content{
  float:right;
  width:116px;
  height:385px;
  margin-right:5px;
  margin-top:5px;
  background-color:transparent;
}
 
.min-vid-left-content{
  margin-bottom:11px; 
}
 
.last-min-vid-left-content{
 
}
 
 
#right-content{
  float:right;
  width:300px;
  height:490px;
  margin-top:11px;
  margin-right:11px;
  background-color:transparent;
}
 
.block-right-content{
  width:100%;
  height:100px;
  background-color:#3300FF;
  margin-bottom:11px;
}

Bon, je précise que le code n'est pas comme il l'a été au moment du problème, j'ai changé des choses etc. Je n'arrive pas à aligner la div "right-content" à celle de gauche.

Quelqu'un pourrait-il m'aider svp?

**Macmillenium** · 27/05/2009, 19h41

Bonsoir,

Sujet traité plusieurs fois, merci de faire une recherche.
http://www.developpez.net/forums/d74...mage-contenue/

**rikemSen** · 27/05/2009, 20h15

Désolé monsieur le modérateur mais non. Ca ne marche pas.
J'ai lu toutes les discutions en lien avec celle que vous m'avez linké mais non. J'ai testé le zoom:1, l'overflow hidden, l'overflow visible... A toutes les places possibles du code :/

**Macmillenium** · 27/05/2009, 23h32

Envoyé par radicaldreamer

Désolé monsieur le modérateur mais non. Ca ne marche pas.
J'ai lu toutes les discutions en lien avec celle que vous m'avez linké mais non. J'ai testé le zoom:1, l'overflow hidden, l'overflow visible... A toutes les places possibles du code :/

Et tu as testé tout ça sur quel bloc

?
Il suffit de rajouter float:left sur #left-content et enfin overflow:hidden sur #page pour qu'il englobe ses deux enfants flottants.

**rikemSen** · 28/05/2009, 09h28

Bonjour, ( :p )

J'ai testé, et j'avais testé sur casiment tous les blocks. Or, j'ai bien compris l'astuce du hidden mais le problème bah ... c'est que ça M'hidden quoi xD.

Je veux dire par là que si j'ai du texte ou un contenu qui varie (affichage de x articles) ça cache...

edit: que sous FF toujours... Pour une fois que je préfère IE :/

**Macmillenium** · 28/05/2009, 12h29

Envoyé par radicaldreamer

Je veux dire par là que si j'ai du texte ou un contenu qui varie (affichage de x articles) ça cache...

Je n'ai pas de problème avec ton code :

Code xhtml :

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
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
   "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>...</title>
</head>
<style>
html{
  margin:0px;
  padding:0px;
}
 
body{
  margin:0px;
  padding:0px;
  
  background-color:#333333;
  font-size:12px;
  font-family:Arial,Helvetica,sans-serif;
  color:#000000;
  text-align:center;
}
 
#content-parent{
  width:1000px;
  background-color:#333333;
  border-left:1px solid white;
  border-right:1px solid white;
  margin:auto;
  text-align:center;
}
 
#content-child{
  width:944px;
  margin:auto;
  border-left:1px solid white;
  border-right:1px solid white;
  text-align:left;
}
 
#head-hight{
  width:944px;
  height:70px;
  background-color:white;
}
 
#head-low{
  width:944px;
  height:auto;
  background-color:red;
  
}
 
#page{
  background-color:yellow;
  width:944px;
  height:auto;
  overflow:hidden;
}
 
#left-content{
  margin-left:11px;
  width:611px;
  height:490px;
  margin-top:11px;
  float:left;
  background-color:transparent;
}
 
#vid-left-content{
  width:611px;
  height:395px;
  background-color:#666666;
 
}
 
 
#fullsize-vid-left-content{
 float:left;
 width:480px;
 height:385px;
 margin-top:5px;
 margin-left:5px;
 background-color:#CCCCCC;
}
 
#minsize-vid-left-content{
  float:right;
  width:116px;
  height:385px;
  margin-right:5px;
  margin-top:5px;
  background-color:transparent;
}
 
.min-vid-left-content{
  margin-bottom:11px; 
}
 
.last-min-vid-left-content{
 
}
 
 
#right-content{
  float:right;
  width:300px;
  margin-top:11px;
  margin-right:11px;
  background-color:transparent;
}
 
.block-right-content{
  width:100%;
  background-color:#3300FF;
  margin-bottom:11px;
}
</style>
<!--[if lte IE 6]>
	<style type="text/css">
		#left-content, #fullsize-vid-left-content {
			display:inline
		}
	</style>
 
<![endif]-->
 
 
</head>
<body>
 
<div id="content-parent">
  <div id="content-child">
 
    <div id="head-hight"></div>
 
    <div id="head-low">s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br>s<br></div>
 
    <div id="page">
 
      <div id="left-content">
        <div id="vid-left-content">
          <div id="fullsize-vid-left-content"></div>
          <div id="minsize-vid-left-content">
            <div class="min-vid-left-content"><img src="./min.JPG"></div>
            <div class="min-vid-left-content"><img src="./min.JPG"></div>
            <div class="min-vid-left-content"><img src="./min.JPG"></div>
            <div class="last-min-vid-left-content"><img src="./min.JPG"></div>
          </div>
        </div>
      </div>
 
      <div id="right-content">
        <div class="block-right-content">lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br />lol <br /></div>
        <div class="block-right-content">lol</div>
      </div>
    </div>
  </div>
</div>
</body>
</html>

IE6- double la marge gauche, à condition qu'elle soit attribuée, du 1er élément d'une série flottante, d'où le display:inline que j'ai rajouté sur les blocs en question, appelé via des commentaires conditionnelles.