Un clear:both qui marche pas ?!

**bblampain** · 08/08/2007, 17h06

Bonjour à tous!

J'ai un petit souci de clear:both avec ses div imbriqués et je vois pas l'erreur donc je fais appel à vous car là je sèche...

En fait je veux que mes 2 colonnes 'colonne_left' et 'colonne_right' s'étirent dans le container parent à savoir 'main_content'. D'où l'utilisation du clear: both

Mais ça marche pas!! Le background-color des colonnes ne s'étire pas en focntion de la taille de sa voisine par exemple.

Franchement là je vois pas... Merci à vous!

PS : Au passage n'hésitez pas à me donner des conseils et remarques quand à ces codes HTML et CSS car j'aime les remarques voir critiques constructives...Ca aide à avancer...

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
37
38
39
40
41
42
43
44
45
46
47
<div id="container">
  <!-- START HEADER 1 -->
  <div id="header1">
  	<div id="header1_logo">une image ici</div>
  	<div id="header1_infos"></div>
  </div>
  <!-- END HEADER 1 -->
 
  <!-- START HEADER 2 -->
  <div id="header2">
  	<div id="header2_menu">
  		 <ul>
  		 	<li><a href='#'>Menu1</a></li>
  		 	<li><a href='#'>Menu2</a></li>
  		 	<li><a href='#'>Menu3</a></li>
  		 	<li><a href='#'>Menu4</a></li>
  		 	<li><a href='#'>Menu5</a></li>
  		 </ul>
  	</div>
  	<div id="header2_banderole"></div>
  </div>
  <!-- END HEADER 2 -->
 
  <!-- START MAIN -->
  <div id='main_content'>
  	<div id='colonne_left'>
  		ahahahhaahhahahahahahahahahahahahahahaha
 
  	</div>
  	<div id='colonne_right'>
  		blablabla
  	</div>
  	<div class='spacer'></div>	
  </div>
  <!-- END MAIN -->
 
  <!--  START FOOTER -->
  <div id='footer'>
   		<ul>
  		 	<li><a href='#'>Menu1</a></li>
  		 	<li><a href='#'>Menu2</a></li>
  		 	<li><a href='#'>Menu3</a></li>
  		 	<li><a href='#'>Menu4</a></li>
  		 	<li><a href='#'>Menu5</a></li>
  		 </ul>
  </div>
</div>

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
* {
margin:0;
padding:0;
}
 
HTML {
font-size:100%;
}
 
BODY {
text-align:center;
font:.8em "Trebuchet MS", helvetica, sans-serif;
margin:10px 0;
background: url(../images/bg-5x5.png) center;
 
}
 
div#container {
width: 766px;
text-align:left;
background-color:#fff;
margin:0 auto;
border: 1px solid #000;
}
 
div#header1_logo {
float:left;
width:415px;
height:108px;
border-right:1px solid #FFF;
}
 
div#header1_infos {
float:left;
background:url(../images/mon_image.gif) no-repeat left top;
height:108px;
width:350px;
}
 
div#header2 {
height:201px;
}
 
div#header1 {
height:108px;
}
 
div#header2_menu {
float:left;
width:191px;
height:200px;
background:url(../images/me-background-menu.gif) no-repeat left top;
border-right:1px solid #FFF;
}
 
#header2_menu ul {
margin-left:35px;
margin-top:25px;
}
 
div#header2_menu li {
list-style-type:none;
line-height:2em;
}
 
div#header2_menu a, div#footer1 a {
color:#fff;
}
 
div#header2_banderole {
float:left;
height:200px;
width: 574px;
background:url(../images/me-background-banderole.gif) no-repeat left top;
}
 
 
#colonne_right{
background: #CBC6AB url(../images/corners-grey.gif) no-repeat top right;
float: left;
width: 529px;
}
 
#colonne_left{
background: #E86841 url(../images/corners-orange.gif) no-repeat top left;
float:left;
width: 236px;
border-right: 1px solid white;
}
 
#colonne_left p.main_text , #colonne_right p.main_text{
padding: 8px;
}
 
div#footer {
height: 40px;
background-color: #3A4C53;
width:100%;
text-align:center;
line-height:40px;
}
 
div#footer1 ul li {
list-style-type:none;
display:inline;
padding:5px;
}
 
.spacer {
clear: both;
}
 
html>body #header2_menu,html>body #header2_banderole {
height:auto;
min-height:200px;
}
}

**trotters213** · 09/08/2007, 09h32

Essaie ceci :

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
* {
margin:0;
padding:0;
}
 
html {
font-size:100%;
}
 
body {
text-align:center;
font:.8em "Trebuchet MS", helvetica, sans-serif;
margin:10px 0;
background: url(../images/bg-5x5.png) center;
 
}
 
#container {
width: 766px;
text-align:left;
background-color:#fff;
margin:0 auto;
border: 1px solid #000;
}
 
#header1_logo {
float:left;
width:415px;
height:108px;
border-right:1px solid #FFF;
}
 
#header1_infos {
float:left;
background:url(../images/mon_image.gif) no-repeat left top;
height:108px;
width:350px;
}
 
#header2 {
height:201px;
}
 
#header1 {
height:108px;
}
 
#header2_menu {
float:left;
width:191px;
height:200px;
background:url(../images/me-background-menu.gif) no-repeat left top;
border-right:1px solid #FFF;
}
 
#header2_menu ul {
margin-left:35px;
margin-top:25px;
}
 
#header2_menu li {
list-style-type:none;
line-height:2em;
}
 
#header2_menu a, #footer1 a {
color:#fff;
}
 
#header2_banderole {
float:left;
height:200px;
width: 574px;
background:url(../images/me-background-banderole.gif) no-repeat left top;
}
 
 
#colonne_right{
/*background: #CBC6AB url(../images/corners-grey.gif) no-repeat top right;*/
background-color:#f00;
float: left;
width: 529px;
}
 
#colonne_left{
/*background: #E86841 url(../images/corners-orange.gif) no-repeat top left;*/
background-color:#0f0;
float:left;
width: 236px;
border-right: 1px solid white;
}
 
#colonne_left p.main_text , #colonne_right p.main_text{
padding: 8px;
}
 
#footer {
height: 40px;
background-color: #3A4C53;
width:100%;
text-align:center;
line-height:40px;
clear:both;
}
 
#footer1 ul li {
list-style-type:none;
display:inline;
padding:5px;
}
 
html>body #header2_menu,html>body #header2_banderole {
height:auto;
min-height:200px;
}

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
37
38
39
40
41
42
43
44
45
46
<div id="container">
  <!-- START HEADER 1 -->
  <div id="header1">
  	<div id="header1_logo">une image ici</div>
  	<div id="header1_infos"></div>
  </div>
  <!-- END HEADER 1 -->
 
  <!-- START HEADER 2 -->
  <div id="header2">
  	<div id="header2_menu">
  		 <ul>
  		 	<li><a href='#'>Menu1</a></li>
  		 	<li><a href='#'>Menu2</a></li>
  		 	<li><a href='#'>Menu3</a></li>
  		 	<li><a href='#'>Menu4</a></li>
  		 	<li><a href='#'>Menu5</a></li>
  		 </ul>
  	</div>
  	<div id="header2_banderole"></div>
  </div>
  <!-- END HEADER 2 -->
 
  <!-- START MAIN -->
  <div id='main_content'>
  	<div id='colonne_left'>
  		ahahahhaahha
 
  	</div>
  	<div id='colonne_right'>
  		blablablalhhhl
  	</div>
  </div>
  <!-- END MAIN -->
 
  <!--  START FOOTER -->
  <div id='footer'>
   		<ul>
  		 	<li><a href='#'>Menu1</a></li>
  		 	<li><a href='#'>Menu2</a></li>
  		 	<li><a href='#'>Menu3</a></li>
  		 	<li><a href='#'>Menu4</a></li>
  		 	<li><a href='#'>Menu5</a></li>
  		 </ul>
  </div>
</div>

Mais chez moi ça allait déjà bien avant. Tu as bien définis un doctype ?

**bblampain** · 09/08/2007, 23h40

Oui oui le doctype est bon (je suis en strict) mais j'ai oublié de mettre du texte un peu plus long dans une des colonnes ('colonne_left' ou colonne_right) pour l'exemple...Ce qui fait que si tu as copié-collé ça soit etre au même niveau..

Erreur de ma part

Mais si tu rajoutes des <br/> (3,4) par exemple dans une des 2 colonnes tu verras la background-color ne suivra pas...

En fait mon clear:both permet à la couleur de background principale du div #container de s'étendre mais j'aimerais que la couleur de background des 2 div dans le div #main_content s'étende aussi!

Merci pour votre aide!

**trotters213** · 10/08/2007, 12h42

rajoute ceci dans tes balises head :

Code Javascript :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
window.onload=ajuste
 
function ajuste()
{
  gauche=document.getElementById('colonne_left');
  droite=document.getElementById('colonne_right');
  if (gauche.offsetHeight>droite.offsetHeight) droite.style.height=gauche.offsetHeight+"px";
  else gauche.style.height=droite.offsetHeight+"px";
}
</script>

**bblampain** · 14/08/2007, 18h24

Envoyé par trotters213

rajoute ceci dans tes balises head :

Code Javascript :

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

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
window.onload=ajuste
 
function ajuste()
{
  gauche=document.getElementById('colonne_left');
  droite=document.getElementById('colonne_right');
  if (gauche.offsetHeight>droite.offsetHeight) droite.style.height=gauche.offsetHeight+"px";
  else gauche.style.height=droite.offsetHeight+"px";
}
</script>

Ok merci ça fonctionne mais je n'ai toujours pas compris pour quoi mon clear: both ne marche pas...

j'aimerais savoir si qqun a une idée d'explication!

merci!

**trotters213** · 16/08/2007, 09h20

Envoyé par bblampain

Ok merci ça fonctionne mais je n'ai toujours pas compris pour quoi mon clear: both ne marche pas...

j'aimerais savoir si qqun a une idée d'explication!

Le spacer que tu utilisais pour faire le clear:both indique de quelle manière le div va être placé par rapport à une boîte flottante précédente. C'est tout.
Autrement dit, il va placer l'élément "clearer" à la suite du dernier élément flottant mais ce n'est pas pour ça qu'il va modifier cet élément.
Il ne fait que se placer en fonction du dernier élément flottant.

Un clear:both qui marche pas ?!

CSS

Discussions similaires

Partager

Partager