Colonnes et float, float et colonnes

[briceparmentier]

Bonjour la communauté Développez.com

Cela fait maintenant quelques temps que je bidouille des sites web, et je suis actuellement confronté à un problème incompréhensible.

Je m'explique : mon but est de faire deux colonnes (un menu à gauche et le contenu à droite), le tout fait à base de <div> (bouh les <table> )
Mon menu est en float: left;, le contenu a une propriété margin-left qui permet de ne pas recouvrir le menu.

Voici le code html :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div id="page">
	<div id="colonne_gauche">
		<div id="menu">
			<a href="#">Lien1</a>
			<a href="#">Lien2</a>
			<a href="#">Lien3</a>
			<a href="#">Lien4</a>
			...
		</div>
		<div id="online"><p class="entete">Qui est en ligne ?</p><p id="liste_membres" class="liste"></p><p id="liste_invites" class="liste"></p></div>
	</div>
	<div id="contenu">
		...
	</div>
</div>

et le code css de tout ce bazar :

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
#page {
	background: #CCCCCC;
	position: relative;
}
#colonne_gauche {
	float: left;
	margin-left: 10px;
	width: 230px;
}
#menu {
	background: #99C500;
	padding: 5px;
	position: relative;
}
#menu a:link, #menu a:active, #menu a:visited {
	border-left: 4px solid #BADE3E;
	color: #000000;
	display: block;
	margin-bottom: 2px;
	padding: 5px;
	text-decoration: none;
}
#menu a:hover {
	color: #FF6600;
	background: #BADE3E;
	padding-left: 10px;
	text-decoration: none;
}
#online {
	margin-top: 10px;
	position: relative;
}
#online p.entete {
	background: #99C500;
	font-family: Georgia;
	font-weight: bold;
	padding: 3px;
}
#online p.liste {
	padding: 5px;
}
#contenu {
	background: #777777;
	margin: 0px 10px 0px 260px;
	padding: 5px;
	position: relative;
}

Jusque là tout va bien. Mon contenu s'intègre proprement à sa place, pas de décalage non voulu, niquel.

Le problème arrive lorsque je remplis mon contenu avec des lignes dont le code est le suivant :

Code :

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="ligne_membre">
	<span class="avatar"><img src="./extra/avatars/defaut.png" /></span>
	<p class="infos"><strong><a href="#">Pseudo</a></strong> <em>alias</em> Prénom</p>
	<div class="cleaner"></div>
</div>
 
.ligne_membre {
	background: #99C500;
	border-bottom: 1px solid #BADE3E;
	margin: 0px 10px;
	position: relative;
}
.avatar {
	float: left;
	margin: 10px;
	text-align: center;
	width: 130px;
}
.infos {
	padding: 5px 150px;
}

Le problème est le suivant : si la première des lignes que je met dans mon contenu contient un "cleaner" (un bête div avec clear: both), la hauteur de cette ligne est influencée par la taille de ma colonne de gauche, mon menu !!!

Voir en direct, c'est plus parlant (j'ai agrandit volontairement le contenu de mon menu pour que ce soit plus flagrant) : http://beta.briceparmentier.com/?page=membres

Si le "contenu" n'a pas de "cleaner", tout est positionné comme il faut.

Une des solutions est de spécifier une hauteur fixe pour chacune de mes lignes, mais j'aimerai trouver une solution pour que la hauteur de chaque ligne soit fonction de son contenu :p

Merci d'avance de m'avoir lu et pour vos éventuelles pistes
Brice

[briceparmentier]

Bonjour

J'ai trouvé une solution (à plus ou moins long terme), qui consiste à mettre ma colonne de gauche en position: absolute;.

Je reste quand même demandeur du pourquoi de mon souci précédent :p

Merci.
Brice