2 DIV et hauteur la plus grande appliquée au deux

Bonjour à tous,

Cela fait depuis un bon moment déjà que je tourne en rond sur cette question. J'ai entendu parler de "colonnes factices" ou encore de "c'est impossible" et dans tous les cas je suis un peu largué...

Peut-être suis-je passé à côté de quelque chose d'important, dans ce cas j'espère que vous saurez me remettre dans le droit chemin

Alors, voilà, j'ai 1 DIV globale pour toute ma page qui englobe 4 DIV. 1 en haut, 1 en bas et 2 au milieu découpée en hauteur. Chaque DIV a sa largeur et sa hauteur fixe sauf, évidemment, les 2 DIV du milieu qui n'ont pas de hauteur fixe.
A propos de ces 2 DIV, celle de gauche est un menu, celle de droite contient le texte. Il arrive parfois que le menu soit plus haut que le texte et inversément. Donc l'idée, c'est de prendre la hauteur de la plus haute des 2 DIV et de l'appliquer à l'autre.

Et là, je sèche...

Voici le CSS des DIV :

div#page {
	width:799px;
}

div#top {
	position:relative;
	width:799px;
	height:218px;
	background-image:url(header.jpg);
	layer-background-image:url(header.jpg);
}

div#left {
	position:relative;
	float:left;
	width:190px;
	background-image:url(left.jpg);
}

div#right {
	position:relative;
	float:left;
	width:609px;
	background-image:url(right.jpg);
}

div#bottom {
	position:relative;
	left:0px;
	width:799px;
	height:49px;
	background-image:url(bottom.jpg);
	layer-background-image:url(bottom.jpg);
	padding-top:13px;
}

La page PHP :

div align="center">
<div id="page">
    <div id="top"></div>
    <div id="left"><?php include 'inc/left.php'; ?></div>
    <div id="right"></div>
    <div id="bottom"><?php include 'inc/bottom.php'; ?></div>
</div>
</div>

Un petit schéma :

Modifié par alemonb (07 Apr 2010 - 15:06)

Bonsoir,

Alors, en ce qui concerne les colonnes factices je te conseille de lire cet article.

Ensuite, je te suggère aussi de jeter un coup d'œil aux gabarits d'Alsacréations. En effet, certains d'entre eux t'aideront peut-être à résoudre ton problème de mise en page .

Hello et bienvenue ici

J'ai l'impression que tu t'embrouilles dans tes choix de positionnement (à quoi te servent tes positions relatives ?).

En fait, pour ce qui est de "colonnes de même hauteur", la réponse est très simple mais en raison du développement de certains navigateurs, doit tenir en plusieurs points :

1- il est tout à fait possible d'obtenir le rendu de cellules de tableau (="colonnes de même hauteur") à l'aide de la propriété "display" associée à la valeur "table-cell". C'est une valeur prévue par CSS2.1 depuis plus de 10 ans et qui suffit à répondre à ta question de manière simplissime.

2- nous avons malheureusement besoin d'un point 2, puisqu'il exist(ait) un seul navigateur qui ne tenait pas compte de cette valeur : Internet Explorer. Jusqu'à IE7, ce navigateur ne comprend pas cette valeur.

3- puisque nous avons encore à faire à IE7, voire IE6, nous devons donc bidouiller pour obtenir ce que tu souhaites. Cela passe soit par l'usage de "vrais" tableaux et cellules HTML (ce que je te conseille), ou par d'autres bidouilles plus ou moins laborieuse (la plus utilisable étant les "faux-columns").

Bon, finalement la réponse fut plus longue qu'annoncée... mais à qui la faute ?

Raphael a écrit :
puisque nous avons encore à faire à IE7, voire IE6, nous devons donc bidouiller pour obtenir ce que tu souhaites. Cela passe soit par l'usage de "vrais" tableaux et cellules HTML (ce que je te conseille), ou par d'autres bidouilles plus ou moins laborieuse (la plus utilisable étant les "faux-columns").

Tout à fait. sur un projet récent, j'avais opté pour 2 solutions différentes en fonction du navigateur :
- display:table-cell pour les bons élèves
- colonnes factices pour les autres (IE7 et antérieur)

Soit une combinaison des propositions 1 et 2 de Raphael . A mon sens, c'est une solution aussi simple que logique.

Bonjour jQz, Raphael et Ladytron et merci pour vos réponses

@jQz, j'ai suivi tes liens et suis tombé sur un gabarit qui correspond exactement à ce dont j'ai besoin : http://www.alsacreations.com/static/gabarits/modele07.html Il utilise d'ailleurs le principe des colonnes factices et je suis actuellement en train d'essayer de l'adapter à mon site. J'ai donc rajouté 1 DIV qui contient les DIV LEFT et RIGHT. A cette DIV, nommée CENTER, j'ai essayé de lui appliqué un background qui se répète verticalement mais cela ne semble pas fonctionner. Il faut que je pousse plus loin la recherche.

En attendant, voici ce que ça donne sur mon schéma :


@Raphael, le choix du "relative" pour les DIV c'est parce que lorsque j'ai cherché à centrer mon site, j'ai lu que la méthode que j'ai trouvé pour le faire ne le permettait pas si mes DIV étaient en "absolute". Raison pour laquelle je les ai passée en relative

@Raphael & Ladytron, ce que je comprends c'est que je dois utiliser deux méthodes selon les navigateurs. La première est celle des colonnes factices et l'autre, que je comprends moins, "display:table-cell" ?

Merci à vous tous pour votre aide
Modifié par dew (20 Apr 2010 - 14:23)

Salut et bienvenue parmi nous

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle.

Bonne continuation

Désolé, c'est modifié D'ailleurs les codes ont changés lol

CSS :

div#page {
	width:799px;
	margin-left:auto;
	margin-right:auto;
}

div#top {
	width:799px;
	height:218px;
	background-image:url(header.jpg);
	background-repeat:no-repeat;
}

div#center {
	background-image:url(center.jpg);
	background-repeat:repeat-y;
}

div#left {
	float:left;
	width:190px;
}

div#right {
	float:left;
	width:609px;
}

div#bottom {
	left:0px;
	clear: both;
	width:799px;
	height:49px;
	background-image:url(bottom.jpg);
	background-repeat:no-repeat;
	padding-top:12px;
}

PHP :

<div id="page">
  <div id="top"></div>
	<div id="center">
    <div id="left"> 
      <?php include 'inc/left.php'; ?>
    </div>
    <div id="right"> 
      <?php include 'accueil.php'; ?>
    </div>
</div>
  <div id="bottom"> 
    <?php include 'inc/bottom.php'; ?>
  </div>
</div>

Modifié par alemonb (07 Apr 2010 - 16:35)

Bon ben ça y est, j'ai trouvé pourquoi l'image background de ma DIV "CENTRE" ne s'affichait pas. Il fallait que je spécifie également le height à 100%. Ce qui donne :

div#center {
	background:#FFFFFF url(center.jpg) left top repeat-y;
	height:100%;
}

Au passage, j'ai viré les position "relative" des DIV, cela ne semble pas influencer le rendu

Merci à tous pour vos "aiguillages".

alemonb a écrit :
Bon ben ça y est, j'ai trouvé pourquoi l'image background de ma DIV "CENTRE" ne s'affichait pas. Il fallait que je spécifie également le height à 100%. Ce qui donne :

div#center {
	background:#FFFFFF url(center.jpg) left top repeat-y;
	height:100%;
}

Au passage, j'ai viré les position "relative" des DIV, cela ne semble pas influencer le rendu

Merci à tous pour vos "aiguillages".

Ouais en fait, j'ai parlé un peu trop vite car sous Firefox ça ne fonctionne pas correctement... L'image ne se répète pas verticalement à l'infini, elle s'arrête au bout d'un moment

Bonjour,

jQz t'as donné le lien vers la solution. Ce que tu cherche à faire s'appelle des colonnes factices (il y a en CSS3 une autre technique, plus propre, mais pas supportée par IE7/6). Rien ne sert de réinventer la roue.

Coucou Laurie-Anne et les autres,

Effectivement, concernant la technique des colonnes factices j'ai enfin réussir à en comprendre les tenants et aboutissants et surtout à l'appliquer à mon site web (cela fait de cela une dizaine de jours).

Sous Internet Explorer je remarque qu'il n'y a strictement aucun problème. Par contre, sous Firefox, l'image de fond ne se répète pas. Y a-t-il un problème de compatibilité avec la technique des colonnes factices et Firefox ?

D'un autre côté, en faisant le test suivant : deux colonnes DIV, l'une est plus haute que l'autre et chacune des DIV a sa propre image de fond, je remarque strictement le même phénomène, c'est-à-dire que l'image de fond ne se répète pas et prend forcément la même hauteur que la DIV la plus petite.

Merci pour votre aide