Interaction entre float et clear

Version imprimable

Bonjour,

Voila j'ai mon code suivant :
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 <div id="globalmember"> <h3 id="memberlogin"> Login </h3> <div id="memberprofile"> <h5>Profil</h5> <p>Sexe</p> <p>Inscrit depuis le</p> <p>Localite : </p> <p>Informations complémentaires : <br /> Pas de description...</p> </div> <div id="memberoptions"> <h5>Options</h5> <p>Contacter</p> <p>S'abonner</p> </div> <div id="membervideolist"> <h5>Liste</h5> <p>Blablablabl...</p> <p>Balablabla2 balbla.</p> </div> </div>
Avec le css qui va bieng
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 #globalmember div { border:1px solid gray; margin-bottom: 10px; } #globalmember p { border:1px solid silver; margin-top:1px; margin-bottom:1px } #globalmember h5 { background: silver; height: 20px; margin-top: 0; margin-bottom: 5px; } h3#memberlogin { text-align:center; width:50%; margin:auto; margin-bottom:20px; } div#memberprofile { width: 50%; float: left; } div#memberoptions { width:35%; margin-left:480px; } div#membervideolist { clear:both; }
Ce qui me donne le résultat suivant :

http://uploads.imagup.com/06/1226019...004_member.jpg

Mon bloc #memberprofile est bien extensible et ne depasse pas sur #membervideolist grace au Clear.

Le probleme, et je suis dessus depuis 2H, c'est que je n'arrive pas à faire en sorte que le bloc Liste se rapproche du bloc Profil, je comprends pas pourquoi il y a cette marge entre les deux... enfin j'imagine que c'est à cause de l'espace qu'occuperai en réalité Options, s'il n'y avait pas le Float.

J'aurais donc besoin de votre aide pour savoir comment puis-je procéder pour rapprocher ces deux blocs ?

Merci d'avance.

06/11/2008, 23h52
devyan

Salut,

Si tu ne positionne pas "margin-bottom" dans h5 le problème devrait disparaître ;)
06/11/2008, 23h55
supertino7

J'essaie ça de suite :)

edit: nope malheureusement.
Ca modifie juste la marge sous le titre des blocs, à l'intérieur.

D'ailleurs, sous IE c'est encore pire 8O
07/11/2008, 00h18
Erwan31

Bizarre.... Pourrais tu donner stp la totalité des codes XHTML/CSS?

Attention de bien préciser une marge aussi en % pour que le placement horizontal du bloc de droite s'adapte selon la taille du viewport (zone d'affichage):

Citation:

div#memberoptions {
width:35%;
margin-left:55%;
}
07/11/2008, 00h44
supertino7

Citation:

Envoyé par Erwan31

Bizarre.... Pourrais tu donner stp la totalité des codes XHTML/CSS?

Attention de bien préciser une marge aussi en % pour que le placement horizontal du bloc de droite s'adapte selon la taille du viewport (zone d'affichage):

Tu m'as mis sur la piste.
Effectivement la page est incluse dans un template, et il y a 3 autres fichiers css. j'ai testé la page et le css "seuls" et là, plus de probleme.

Je pense qu'il y a une autre feuille de style qui doit foutre la merde, mais je sais pas trop si je dois les coller, vu la taille de ces derniers.

Je vais déja les desactiver une par une voire laquelle entre en conflit.
07/11/2008, 01h03
Erwan31

Pour détecter facilement la source de ce type de problème, et si tu ne
souhaites pas coller le code ici, je te conseil vivement d'installer Firebug (une
extension de Firefox pour le developpement front-end) ;)

Bon eh bien, apparemment, c'est ma feuille de style principale qui merde.

Désolé elle un peu longue, désordonnée, et pas encore optimisé, il doit y avoir pas mal d'erreurs.

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
 
/* ================================= BODY */
body {
	width: 85%;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: #e0eec3;
	background-image: url("../images/background.png");
	background-repeat: repeat-x;
	font-family: Tahoma, Verdana, Arial, "Sans-Serif";
	color: black;
}
 
a { /* Formatage des liens generaux */
	color: black;
	font: 1em Tahoma,Arial,sans-serif;
	text-decoration: none;
}
a:hover, a:focus, a:active { 
	color: #960006;
}
 
/* ================================= STYLES MENU HAUT */
#menu_top {
	margin-bottom: 20px;
}
#banniere {
	border: 1px solid black;
	border-bottom: none;
	width: 100%;
	height: 60px;
	margin: auto;
	background-image: url("../images/banniere.png");
	background-repeat: repeat-x;
}
 
#menu_notlogged {
	font-size: 0.8em;
	border: 1px solid black;
	width: 100%;
	margin: auto;
	text-align: center;
	background-color: #bcda7b;
}
 
#menu_notlogged ul { /* PROPRIETES DE LA LISTE POUR MENU, MENU TOP */
	height: 20px; 
	margin-top: 7px;
	margin-bottom: 3px;
}
 
#menu_notlogged li { /* PROPRIETES DES ELEMENTS DU MENU, MENU TOP */
	display: inline;
	margin-right: 20px;
}
 
#menu_notlogged li a { /* PROPRIETES DES LIENS DANS LES ELEMENTS DU MENU, MENU TOP */
	padding: 4px 20px;
	color: black;
	border: 1px solid black;
	font: 1em Tahoma,Arial,sans-serif;
	text-align: center;
	text-decoration: none;
}
 
#menu_notlogged li a:hover, #menu_notlogged li a:focus, #menu_notlogged li a:active { /* PROPRIETES DES LIENS DANS LES ELEMENTS DU MENU AU PASSAGE DE LA SOURIS, MENU TOP */
	background: #a8cf52;
	color: #960006;
}
 
/* ================================= STYLES MENUS GAUCHE */
#menu_left { 
	float: left;
	width: 18%;
}
 
.bloc_menu_left { /* PROPRIETES DES MINI BLOCS MENU GAUCHE */
	background-color: #bcda7a;
	border: 1px solid black;
	margin-bottom: 20px;
	padding: 5px;
	font: 0.7em Tahoma,Arial,sans-serif;
}
 
.bloc_menu_left input { /* PROPRIETES DU CHAMPS LOGIN DU BLOC MENU GAUCHE */
	background-color:#e8f2d3;
	border:1px solid #56701f;
	font-family: Tahoma,"sans-serif";
	font-size: 1.2em;
}
 
.bloc_menu_left input[type=text],.bloc_menu_left input[type=password] { /* PROPRIETES DES INPUTS TEXTE MENU GAUCHE */
	width: 100px;
}
.bloc_menu_left input[type=submit] { /* PROPRIETES DES INPUTS TEXTE MENU GAUCHE */
	font-size: 1em;
}
 
.bloc_menu_left p { /* PROPRIETES DU BLOC PARAGRAPHE MENU GAUCHE */
	font-family: Tahoma,"sans-serif";
	font-size: 1em;
	margin-top: 0px;
	margin-bottom: 5px;
}
 
span.bloc_menu_left_bigger { /* PROPRIETE DU PSEUDO DANS LE BLOC GAUCHE */
	font-weight: bold;
	font-size: 1.2em;
}
 
/* ================================= STYLES CONTENU */
#content  {
	margin-left: 20%;
	margin-bottom: 20px;
	padding: 20px;
	border: 1px solid black;
	background: #e8f2d3;
	/*height: 100%;*/
}
 
/* ================================= STYLE PIED DE PAGE */
#footer{ /* PROPRIETES DU PIED DE PAGE */
	background-color: #bcda7a;
	border: 1px solid black;
	text-align: center;
	margin-top: 20px;
	clear: both;
}
#footer p {
	height: 20px;
	margin: auto;
	font-size: 0.6em;
	padding-top: 5px;
}

et voici l'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
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Le site de fou</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="website" href="css/design.css" />
       <link rel="stylesheet" media="screen" type="text/css" title="website" href="css/member.css" />       
       <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
   </head>
 
<body>
<!--  Menu haut -->
	<div id="menu_top">
		<div id="banniere"></div>
<div id="menu_notlogged">
	<ul>
			<li><a href="index.html" title="Accueil">Accueil</a></li>
			<li><a href="intro" title="Aide">Aide</a></li>
			<li><a href="forum" title="Forum">Forum</a></li>
 
			<li><a href="postvideo" title="Poster une vidéo">Poster une vidéo</a></li>
			<li><a href="-out" title="Deconnexion">Quitter</a></li>
	</ul>
</div>
	</div>
 
<!-- Menu gauche -->
	<div id="menu_left">
			<div class="bloc_menu_left">
 
		<p>Bonjour <span class="bloc_menu_left_bigger">supertino7</span></p>
		<p><a href="postvideo"><strong>Poster une vidéo</strong></a></p>
		<p><a href="myvideos" title="Mes videos">Mes videos</a></p>
		<p><a href="myaccount">Mon compte</a></p>
	</div>
 
<div class="bloc_menu_left">
 
	<p>Rechercher</p>
		<form method="post" action="search.php">
		<p><input type="text" name="search">&nbsp;<input type="submit" value="ok"></p>
		</form>
</div>
 
<div class="bloc_menu_left">
	<p>Statistiques</p>
</div>
	</div>
 
<!-- Contenu -->
	<div id="content">
 
			<div id="globalmember">
	<h3 id="memberlogin">
 
		Login
	</h3>
 
	<div id="memberprofile">
		<h5>Profil</h5>
		<p>Sexe</p>
		<p>Inscrit depuis le</p>
 
		<p>Localite : </p>
 
		<p>Informations complémentaires : <br /> Pas de description...</p>
	</div>
 
	<div id="memberoptions">
		<h5>Options</h5>
		<p>Contacter</p>
		<p>S'abonner</p>
 
	</div>
 
	<div id="membervideolist">
		<h5>Liste</h5>
		<p>Blablablabl...</p>
		<p>Balablabla2 balbla.</p>
	</div>
 
</div>	</div>
 
<!-- Pied de page -->
	<div id="footer">
<p>Copyright</p>
</div></body>
</html>

merci

07/11/2008, 01h12
supertino7

Citation:

Envoyé par Erwan31

Pour détecter facilement la source de ce type de problème, et si tu ne
souhaites pas coller le code ici, je te conseil vivement d'installer Firebug (une
extension de Firefox pour le developpement front-end) ;)

Ouip, c'est dessus justement que j'ai passé 2 heures :D

Je supprime/desactive et change les valeurs des proprietés, si c'est bien comme ça qu'on procède pour debugguer :mrgreen:

edit : j'ai ajouté l'HTML à mon post au dessus
07/11/2008, 01h40
supertino7
J'ai l'impression que ça vient de la
Code:

1 2 3 4 5 #menu_left { float:left; width:18%; }
En fait le bloc Liste #membervideolist (clear:both), au lieu de se caler sous la flottante #memberprofile du même conteneur, vient se caler sous la flottante #menu_left, située en dehors du conteneur

C'est bizarre ?
Quand je desactive le float, il n'y a plus d'espace

effectivement, j'ai fait un p'tit test, avec la même structure :

http://images.imagup.com/07/12260310...floatclear.jpg

Le Footer2 se cale au niveau du bas du bloc1, au lieu de se coller finalement au bloc2.

Voici le code utilisé :

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
 
<style type="text/css">
body {
	width: 70%;
}
div {
	border: 1px solid black;
	margin: 5px;
}
 
#flottant1 {
	float: left;
	width: 30%;
}
#normal1 {
	margin-left: 50%;
}
#clear1 {
	clear: left;
}
#flottant2 {
	float: left;
	width: 30%;
}
#normal2 {
	margin-left: 50%;
}
#clear2 {
	clear: left;
}
</style>
<body>
<div>
	<div id="flottant1">
		bloc 1 float:left<br />
		bloc 1 float:left<br />
		bloc 1 float:left<br />
		bloc 1 float:left<br />
		bloc 1 float:left<br />
	</div>
 
	<div id="normal1">
		Contenu1
		<div id="flottant2">
		bloc 2 float:left<br />
		bloc 2 float:left<br />
		</div>
		<div id="normal2">
		Contenu2
		</div>
		<div id="clear2">
		Footer2 clear left
		</div>
 
	</div>
 
	<div id="clear1">
		Footer1 un clear left
	</div>
</div>
</body>

07/11/2008, 03h35
supertino7
J'ai trouvé une solution "pour depanner" mais bon...

En mettant un float:right,
puis un clear:right
en adaptant les marges
puis bien sur inverser le contenu des 2 premieres div de Contenu1.

j'ai le footer2 qui se cale bien, puisqu'avec le clear:right à droite il n'y a qu'une seule flottante, et c'est sa soeur.
Code:

1 2 3 4 5 6 7 8 9 10 11 12 #flottant2 { float: right; width: 40%; } #normal2 { width: 30%; margin-right: 60%; } #clear2 { clear: right; }
Mais bon c'est vraiment limité comme solution, ça voudrait dire que je ne pourrai avoir que 2 clears dans la page complète, pour que mes div se positionnent bien sur un élement soeur et non pas sur le 1ere flottant qu'ils trouvent dans le document.
07/11/2008, 20h20
Erwan31

Donnes la totalité du code MODIFIE stp (ou alors mieux une page en ligne), histoire de faciliter la tâche à ceux qui te répondent ;)
07/11/2008, 22h26
supertino7

Citation:

Envoyé par Erwan31

Donnes la totalité du code MODIFIE stp (ou alors mieux une page en ligne), histoire de faciliter la tâche à ceux qui te répondent ;)

Salut

l'exemple que je donne là http://www.developpez.net/forums/d63...r/#post3765320

est la même chose avec le contenu en moins :)

On peut donc voir que Footer2 se cale sous Bloc1, qui lui est situé à l'exterieur du parent
Ce que je voudrais donc, c'est que Footer2 soit collé à Bloc2, sans tenir compte du flottant Bloc1

j'ai cherché des solutions partout, j'ai pas réussi à trouver.:aie:

Lol, bon désolé mais j'ai tout donné là :aie: , et j'ai rien en ligne.

je reposte

la 1ere feuille de style

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
 
 
/* ================================= BODY */
body {
	width: 85%;
	margin: auto;
	margin-top: 20px;
	margin-bottom: 20px;
	background-color: #e0eec3;
	background-image: url("../images/background.png");
	background-repeat: repeat-x;
	font-family: Tahoma, Verdana, Arial, "Sans-Serif";
	color: black;
}
 
a { /* Formatage des liens generaux */
	color: black;
	font: 1em Tahoma,Arial,sans-serif;
	text-decoration: none;
}
a:hover, a:focus, a:active { 
	color: #960006;
}
 
/* ================================= STYLES MENU HAUT */
#menu_top {
	margin-bottom: 20px;
}
#banniere {
	border: 1px solid black;
	border-bottom: none;
	width: 100%;
	height: 60px;
	margin: auto;
	background-image: url("../images/banniere.png");
	background-repeat: repeat-x;
}
 
#menu_notlogged {
	font-size: 0.8em;
	border: 1px solid black;
	width: 100%;
	margin: auto;
	text-align: center;
	background-color: #bcda7b;
}
 
#menu_notlogged ul { /* PROPRIETES DE LA LISTE POUR MENU, MENU TOP */
	height: 20px; 
	margin-top: 7px;
	margin-bottom: 3px;
}
 
#menu_notlogged li { /* PROPRIETES DES ELEMENTS DU MENU, MENU TOP */
	display: inline;
	margin-right: 20px;
}
 
#menu_notlogged li a { /* PROPRIETES DES LIENS DANS LES ELEMENTS DU MENU, MENU TOP */
	padding: 4px 20px;
	color: black;
	border: 1px solid black;
	font: 1em Tahoma,Arial,sans-serif;
	text-align: center;
	text-decoration: none;
}
 
#menu_notlogged li a:hover, #menu_notlogged li a:focus, #menu_notlogged li a:active { /* PROPRIETES DES LIENS DANS LES ELEMENTS DU MENU AU PASSAGE DE LA SOURIS, MENU TOP */
	background: #a8cf52;
	color: #960006;
}
 
/* ================================= STYLES MENUS GAUCHE */
#menu_left { 
	float: left;
	width: 18%;
}
 
.bloc_menu_left { /* PROPRIETES DES MINI BLOCS MENU GAUCHE */
	background-color: #bcda7a;
	border: 1px solid black;
	margin-bottom: 20px;
	padding: 5px;
	font: 0.7em Tahoma,Arial,sans-serif;
}
 
.bloc_menu_left input { /* PROPRIETES DU CHAMPS LOGIN DU BLOC MENU GAUCHE */
	background-color:#e8f2d3;
	border:1px solid #56701f;
	font-family: Tahoma,"sans-serif";
	font-size: 1.2em;
}
 
.bloc_menu_left input[type=text],.bloc_menu_left input[type=password] { /* PROPRIETES DES INPUTS TEXTE MENU GAUCHE */
	width: 100px;
}
.bloc_menu_left input[type=submit] { /* PROPRIETES DES INPUTS TEXTE MENU GAUCHE */
	font-size: 1em;
}
 
.bloc_menu_left p { /* PROPRIETES DU BLOC PARAGRAPHE MENU GAUCHE */
	font-family: Tahoma,"sans-serif";
	font-size: 1em;
	margin-top: 0px;
	margin-bottom: 5px;
}
 
span.bloc_menu_left_bigger { /* PROPRIETE DU PSEUDO DANS LE BLOC GAUCHE */
	font-weight: bold;
	font-size: 1.2em;
}
 
/* ================================= STYLES CONTENU */
#content  {
	margin-left: 20%;
	margin-bottom: 20px;
	padding: 20px;
	border: 1px solid black;
	background: #e8f2d3;
	/*height: 100%;*/
}
 
/* ================================= STYLE PIED DE PAGE */
#footer{ /* PROPRIETES DU PIED DE PAGE */
	background-color: #bcda7a;
	border: 1px solid black;
	text-align: center;
	margin-top: 20px;
	clear: both;
}
#footer p {
	height: 20px;
	margin: auto;
	font-size: 0.6em;
	padding-top: 5px;
}

la 2eme feuille de style

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
#globalmember div {
border:1px solid gray;
margin-bottom: 10px;
}
#globalmember p {
border:1px solid silver;
margin-top:1px;
margin-bottom:1px
}
#globalmember h5 {
background: silver;
height: 20px;
margin-top: 0;
margin-bottom: 5px;
}
h3#memberlogin {
text-align:center;
width:50%;
margin:auto;
margin-bottom:20px;
}
div#memberprofile {
width: 50%;
float: left;
}
div#memberoptions {
width:35%;
margin-left:480px;
}
div#membervideolist {
clear:both;
}

et l'html complet

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" >
   <head>
       <title>Le site de fou</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
       <link rel="stylesheet" media="screen" type="text/css" title="website" href="css/design.css" />
       <link rel="stylesheet" media="screen" type="text/css" title="website" href="css/member.css" />       
       <script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
   </head>
 
<body>
<!--  Menu haut -->
	<div id="menu_top">
		<div id="banniere"></div>
<div id="menu_notlogged">
	<ul>
			<li><a href="index.html" title="Accueil">Accueil</a></li>
			<li><a href="intro" title="Aide">Aide</a></li>
			<li><a href="forum" title="Forum">Forum</a></li>
 
			<li><a href="postvideo" title="Poster une vidéo">Poster une vidéo</a></li>
			<li><a href="-out" title="Deconnexion">Quitter</a></li>
	</ul>
</div>
	</div>
 
<!-- Menu gauche -->
	<div id="menu_left">
			<div class="bloc_menu_left">
 
		<p>Bonjour <span class="bloc_menu_left_bigger">supertino7</span></p>
		<p><a href="postvideo"><strong>Poster une vidéo</strong></a></p>
		<p><a href="myvideos" title="Mes videos">Mes videos</a></p>
		<p><a href="myaccount">Mon compte</a></p>
	</div>
 
<div class="bloc_menu_left">
 
	<p>Rechercher</p>
		<form method="post" action="search.php">
		<p><input type="text" name="search">&nbsp;<input type="submit" value="ok"></p>
		</form>
</div>
 
<div class="bloc_menu_left">
	<p>Statistiques</p>
</div>
	</div>
 
<!-- Contenu -->
	<div id="content">
 
			<div id="globalmember">
	<h3 id="memberlogin">
 
		Login
	</h3>
 
	<div id="memberprofile">
		<h5>Profil</h5>
		<p>Sexe</p>
		<p>Inscrit depuis le</p>
 
		<p>Localite : </p>
 
		<p>Informations complémentaires : <br /> Pas de description...</p>
	</div>
 
	<div id="memberoptions">
		<h5>Options</h5>
		<p>Contacter</p>
		<p>S'abonner</p>
 
	</div>
 
	<div id="membervideolist">
		<h5>Liste</h5>
		<p>Blablablabl...</p>
		<p>Balablabla2 balbla.</p>
	</div>
 
</div>	</div>
 
<!-- Pied de page -->
	<div id="footer">
<p>Copyright</p>
</div></body>
</html>

vala :D

08/11/2008, 03h43
GihefBey
Essaye
Code:

1 2 3 4 5 #memberoptions { width: 35%; margin-left: 51%; /* à adapter aux besoins */ }
La marge de 51% correspond à un peu plus que la largeur de 50% du bloc de gauche.

-
08/11/2008, 14h02
Erwan31

Bonjour,
ok tu es exactement confronté au problème illustré dans cet article : le bloc dégagé (doté du clear) est repoussé sous un autre flottant plus en amont dans le code, en l'occurrence ici ta colonne de gauche.

Si tu es pressé, un overflow:hidden (en complétant avec un width:100% dédié à IE6- pour lui conférer le layout ) sur #globalmember réglera ton problème ;)

Il me semble que ce genre de configuration pose des problèmes plus ennuyeux de fusion ou d'ajout de marges sur le :hover des lien sous IE6, à vérifier tout de même.

PS: tu n'as toujours pas converti la marge gauche du bloc option en %, ce qui n'est pas sans poser problème.
08/11/2008, 16h29
supertino7

Ah , merci pour le lien, je vais lire ça :)

PS : pour les marges, je les ai bien converti en %, c'est juste que j'ai copié les codes de la page précédentes qui n'étaient pas encore mis à jour.