28220 sujets

CSS et mise en forme, CSS3

Deux colonnes de même hauteur

Bonjour...

J'aimerais savoir comment on fait pour avoir deux colonnes de même hauteur (compatible sur IE 5.5 et+, Opera 8.5 et+ et FireFox si possible) dans une page web, sachant que :

Ma page est composée d'un "conteneur" (#container) qui contient :
- Le header (#header)
- Un menu horizontal sous le header (#menu)
- Sous le header : la colonne de gauche (news) (#graybox)
- À droite de cette colonne, une autre colonne (#contentbox)
- Un footer (#footer)

J'aimerais que ma colonne pour le contenu (#contentbox) et ma colonne pour les news (#graybox) prennent la même hauteur.

Ma feuille de style .css :

#container {
	margin: auto;
	width: 760px;
	background-color: #FFFFFF;
	border: 1px solid #C0A8A5;
	height: 100%;
}

#header {
	background-image: url(images/header.jpg);
	height: 173px;
	width: 760px;
}

#menu {
	background-color: #E6665D;
	font-family: Verdana, Arial, Helvetica, sans-serif;
	font-size: 10px;
	font-weight: bold;
	color: #FFFFFF;
	text-align: right;
	width: 760px;
	height: 15px;
	border-bottom: 1px solid #CA0000;
}

#graybox {
	background-color: #F5F5F5;
	width: 160px;
	float: left;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 10px;
	color: #767676;
	border-right: 1px solid #CCCCCC;
	border-bottom: 2px solid #CCCCCC;
	text-align: left;
	padding: 11px 2px 0px;
	margin-bottom: 0px;
	height: 100%;
	background-image: url(images/bg.gif);
	background-repeat: repeat;
}

#contentbox {
	margin: 8px 0px 5px 175px;
	clear: none;
	padding: 0px;
	visibility: visible;
}

#footer {
	visibility: visible;
	width: 760px;
	text-align: center;
	letter-spacing: 1px;
	font-family: Arial, Verdana, Helvetica, sans-serif;
	font-size: 10px;
	color: #999999;
	height: 15px;
	margin: 0px;
	border-top: 1px solid #DDDDDD;
	clear: both;
	background-color: #FAFAFA;
	padding: 0px;
}

body {
	margin: 30px 0px;
	padding: 30px 0px;
	background-color: #FFFFFF;
	background-image: url(images/bg.gif);
	background-repeat: repeat;
	background-attachment: fixed;
	height: 100%;


Merci d'avance.
Modifié par jean-simon (29 Dec 2005 - 01:55)
Si tes deux "colonnes" sont des colonnes de tableau (élément <td>), alors elles ont la même hauteur.

Mais comme tu poses la question, je suppose que les deux colonnes en question sont plutôt d'autres éléments, par exemple des <div>. Alors la réponse à ta question du comment faire :

- Réponse courte : c'est impossible(*).

- Réponse longue : c'est impossible juste en appliquant des styles sur les deux éléments, mais il existe des trucs pour donner l'impression, visuellement parlant, d'avoir deux colonnes de même longueur. En général, ça demande d'utiliser trois divs : on rajoute une div qui contient les deux "colonnes". Du coup la "colonne" la plus longue fait s'agrandir la div conteneur. On mettra donc un style à ce conteneur plutôt qu'à la colonne "courte". Mais c'est assez limité comme procédé (note : il est détaillé dans pas mal de tutoriels, et une petite recherche google t'en donnera bien un !), et il doit en exister plusieurs autres.

---
* du moins d'après mes dernières infos...
Merci !

J'avais déjà jeté un coup d'oeil rapide à la FAQ, mais j'avais pas vu la solution... je suis vraiment aveugle !

Et vive Alsacrations !
mpop a écrit :
Si tes deux "colonnes" sont des colonnes de tableau (élément <td>), alors elles ont la même hauteur.


En CSS et sans tableau, c'est exactement ce qu'on obtient sans bidouillage via display:table et display:table-cell Smiley cligne

Ah, que le monde serait beau si CSS2.1 était complètement implémenté...
Laurent Denis a écrit :


En CSS et sans tableau, c'est exactement ce qu'on obtient sans bidouillage via display:table et display:table-cell Smiley cligne

Ah, que le monde serait beau si CSS2.1 était complètement implémenté...

Les propriétés non implémentées, je me les suis mises sur un post-it avec marqué dessus : « Notes pour (beaucoup?) plus tard » Smiley biggol
Nonon, il faut se faire plaisir, et jouer avec dans le ou les navigateurs qui les supportent. ça aide... et ce sera utile, peut-être bien dans pas si longtemps Smiley cligne
Sujet clos
Aller à