Hauteur de div float

Meutel

17 May 2005 à 16:12

Bonjour à tous et à toutes,

j'essaie de positionner des div avec une propriétés float:left de façon à ce qu'ils aient la meme hauteur (celle du div dont le contenu est le plus haut)

exemple:


<html><bodY>
<style type="text/css">
#container {
	width: 200px;
	border:1px solid black;
}
#col1 {
	float: left;
	background-color:grey;
}
#col2 {
	float: right;
	background-color:lightgrey;
}
.clr {
	clear: both;
}
</style>
<div id="container">
	<div id="col1">contenu<br/>sur 2 lignes</div>
	<div id="col2">contenu sur 1 ligne</div>
	<div class="clr"></div>
</div>
</body></html>

sur cet exemple je voudrais avoir les 2 blocs gris de la meme hauteur

j'ai essayé sans succés d'utiliser les propriétés height top et bottom

quelqu'un a une astuce?

merci

Igor

17 May 2005 à 23:47

Bonjour et bienvenue Meutel,

Pour que le float fonctionne il faut que les éléments auxquels ils s'appliquent soient dimensionnés:


#col1 {
float: left;
width:100px;
background-color:grey;
}
#col2 {
float: right;
width:100px;
background-color:lightgrey;

ps: ton code c'est un raccourci ? Car il y manque un doctype, et une partie <head>. (attention à <bodY>) Smiley cligne

~~supprimé~~

18 May 2005 à 01:43

Igor a écrit :

Pour que le float fonctionne il faut que les éléments auxquels ils s'appliquent soient dimensionnés:

Euh non c'est pas obligatoire, tu peux faire floater des éléments qui n'ont pas de taille définie.

Meutel : Ton problème n'est pas solvable directement mais en passant par une astuce expliquée ici :
Blocs de meme hauteur sans tableaux