28172 sujets

CSS et mise en forme, CSS3

Bonjour,

Je m'arrache un peu les cheveux avec ce simple exemple :

http://supercanard.phpnet.org/bordel/test.htm

Comme on le voit, le block de droite contient plus de texte donc prend forcément plus d'espace vertical que celui à côté et force le containeur à s'agrandir.
Comment faire pour que l'autre block prenne autant d'espace vertical quitte à ce qu'il y ait un espace vide, afin que les 2 blocks aient la même hauteur ? Smiley confus

J'ai cherché quelques pistes sans résultat avec min-height

<style type="text/css">
	#containeur
	{
		width : 300px;
		padding : 5px;
		overflow : hidden;
		background : #000;
	}
	#block_a
	{
		float : left;
		padding : 5px;
		width : 100px;
		margin-right : 5px;
		background : #fff;
	}
	#block_b
	{
		float : left;
		padding : 5px;
		width : 100px;
		background : #fff;
	}
</style>
Modérateur
Salut, Smiley smile

Il faut fixer la taille du conteneur (ce qui est souvent trop contraignant) puis attribuer une hauteur de 100% aux blocs enfants.

L'autre méthode est que ton conteneur soit un tableau si tu ne veux/peux pas fixer de hauteur tout en restant compatible avec chaque navigateur.
Modifié par koala64 (24 Feb 2008 - 14:07)
arfff

Fixer la taille c'est impossible... et un tableau c'est possible mais en fait non Smiley biggrin

Zut je pensais qu'il existait une solution Smiley decu

Merci à toi Smiley cligne
Modérateur
La solution existe: c'est de passer par display:table-cell; mais ce n'est pas compris par IE... d'où le tableau... Smiley smile
Modifié par koala64 (24 Feb 2008 - 14:30)