Bonjour

Je voudrais 4 colones de même tailles qui s'ajuste à la première, sans devoir definir la taille d'un conteneur.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Unbenanntes Dokument</title>
<style type="text/css">
#wrapper {
	height:600px;
}
#cl1,#cl2,#cl3,#cl4 {
	float:left;
	width:25%;
}
#cl1 {
	background-color:#F0F;
	height:inherit !important;
}
#cl2 {
	background-color:#0FF;
	height:inherit !important;
}
#cl3 {
	background-color:#FF0;
	height:inherit !important;
}
#cl4 {
	background-color:#00F;
	height:inherit !important;
}
</style>
</head>

<body><div id="wrapper">
<div id="cl1">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<div id="cl2"></div>
<div id="cl3"></div>
<div id="cl4"></div></div>
</body>
</html>

Dans cette exemple je suis obliger de mettre une taille pour le conteneur "wrapper", mais je voudrais que les trois autres colonnes s'ajuste automatiquement à la première.
upload/28417-Bildschirm.png
Modifié par 3arly3F (27 Jul 2010 - 23:32)
Bonjour,

Pour résumer, tu définis la hauteur de tes blocs ainsi:
#wrapper {
  height: 600px;
}
#wrapper > div {
  height: inherit;
}
(Note que le !important ne sert strictement à rien dans ton code.)

Le parent a une hauteur définie ("600px"). Pour les enfants, tu définis la propriété height en demandant à ce que la valeur pour la parent de cette même propriété s'applique. Donc tu obtiens "600px" également.

Maintenant, si tu enlèves la hauteur du parent, la valeur de height pour #wrapper sera "auto", et donc la valeur de height pour chaque enfant sera "auto" aussi. Du coup ça ne marche plus. En conclusion, cette technique n'est pas exploitable. (On pourra dire la même chose de l'utilisation de height:100%, pour des raisons légèrement différentes.)

Pour réaliser des colonnes de même hauteur, tu as plusieurs options:
- tableau de mise en page (robuste et compatible, quelques inconvénients);
- utilisation de display:table-cell (même robustesse et inconvénients que ci-dessus, mais pas compatible IE7);
- technique dite des «colonnes factices» (colonnes flottantes, utilisation d'une image de fond pour simuler des hauteurs égales).
Merci pour vos réponses, très intéressante la solution dans ton lien Sorano merci.

J'ai bien mis 1 heure pour faire sa avec 4 colonnes, j'avais pas vu le lien en bas de page Smiley biggol

Vraiment très intéressant le site!
Modifié par 3arly3F (05 Jun 2010 - 08:31)