Float / div parent.

Version imprimable

Float / div parent.

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:

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:

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?

27/05/2009, 19h41
Macmillenium

Bonsoir,

Sujet traité plusieurs fois, merci de faire une recherche.
http://www.developpez.net/forums/d74...mage-contenue/
27/05/2009, 20h15
rikemSen

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 :/
27/05/2009, 23h32
Macmillenium

Citation:

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 :roll: ?
Il suffit de rajouter float:left sur #left-content et enfin overflow:hidden sur #page pour qu'il englobe ses deux enfants flottants.
28/05/2009, 09h28
rikemSen

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 :/

Citation:

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:

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.

28/05/2009, 13h21
HiRoN

Bonjour,

Citation:

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...

Ne serais-ce pas car tu lui attribues une hauteur ? (donc si contenu > hauteur = bug)
28/05/2009, 14h22
rikemSen

Merci à tous les deux. Le code de Macmillenium marche et j'ai du enlever une hauteur comme dit par HiRoN.

Ca m'a donc permis de faire la taille variable de la page selon les articles (présent en dessous du blog gris) ou du contenu right dans les menus.

Merci beaucoup à tous les deux. Problème résulu :ccool: