Harmoniser les hauteurs de mes divs

Bonjour,

Je suis en train de revoir toute la structure d'une de mes pages (pas en ligne pour l'instant) via les bons conseils que j'ai pu trouver au détour de ce forum et des tuto.
J'ai 3 div placées comme ceci :

		<div id="left" onclick="hide();"></div>
		<div id="tree">
			<h1>Titre tree</h1>
			Tiens en voila du tree
		</div>
		<div id="right">
			<h1>Titre 1 right</h1>
			Plouf plouf le merveilleux monde de du right 1
			<div class="foot"></div>
			<div class="separator"></div>
			<h1>right2</h1>
			Plouf plouf voila right2
		</div>

Mes div conteneuses tree et right ont la meme structure :

background-color:#7e1557;
position:relative;
color:#FFFFFF;
width:30%;
float:left;
top:50px;

Ma div left sert uniquement à masquer tree sur un clic dessus

Mes classes foot et separator servent uniquement a faire de l'affichage (j'aurai aussi pu faire une div par partie Titre+Contenu mais j'applique un style entre 2)

Mon problème est que l'alignement bas de ces 3 divs dépend pour l'instant de ce qu'elles contiennent (normal j'ai rien fait contre ça pour l'instant), mon but final est qu'elles fassent la même taille quelque soit le contenu de chacunes et ce en CSS

Ma première idée déja valable (avant refonte de mon design) revenait à les inclure dans une div avec un background-color identique qui faisait "paraitre" les div harmonisées.

Je me demande maintenant si il n'est pas possible que ce "paraitre" devienne "etre" et de virer définitivement cette div conteneuse.




Merci d'avance de vos réponses et conseils

tu peux leurs donner une hauteur fixe et utiliser en plus la propriété overflow si le contenu risque d'être plus long.

Oui mais avec une hauteur fixe elles se suivront pas si un des contenu dépasse la hauteur (ce qui arrive)

Et je souhaite ne pas utiliser les overflow car ils me bouffent de l'espace avec des barres de scroll toutes laides

(oui je suis difficile)

Merci pour ta réponse ^^

Bon j'ai tout de même fait un test avec un "width:90%; overflow:auto;".
Le résultat me gène un peu (pas fan des barres de scroll à l'interieur d'une page) mais vu qu'on voit pas les barres quand ça dépasse pas je pourai quand même faire avec.

Si quelqu'un a une autre idée je suis toujours prenneur d'une autre solution.

Edit : Par contre les scroll d'overflow qui réagissent pas eu scroll de la souris sous FF c'est pas Glop du tout...
Modifié par Nagaroth (08 Mar 2006 - 16:20)

Petit up avant que je ne balise mon titre en [partiellement résolu]

La div conteneuse avec background-color ou un height + overflow:auto seraient dont les deux uniques solutions possibles ?

j'ai bien une solution mais qui ne fonctionne qu'avec IE si ca te dit c'est quand meme 85% des internautes.
padding-bottom:1000px;
margin-bottom:-1000px;

Raaaah c'est exactement le rendu que je voulais avoir, dommage que ça ne marche pas sous FF (enfin FF l'interprette correctement, c'est juste IE qui triche)

Merci pour l'astuce, bien que je ne puisse pas la mettre en place vu que la compatibilité multi-navigateur est un point obligatoire pour ce projet.

Ca me fait penser que plutôt que de tenter d'harmoniser mes hauteurs, il sera peut être plus simple de forcer d'aller en bas de fenêtre comme le fait le padding-bottom:1000px; margin-bottom:-1000px; sous IE
Modifié par Nagaroth (09 Mar 2006 - 09:45)