[CSS] Trois boîtes, hauteurs de contenu différentes

Salut, les gens!

J’ai un problème, je m’arrache les cheveux dessus, pourtant c’est de la couillonnade, j’ai honte de vous demander.

Imaginez (ou allez voir l’illustration fournie derrière ce lien)

Ces trois boîtes sont le contenu d’un site. A gauche, un menu. Au centre, le contenu proprement dit et à droite, du bordel.

Le but est qu’elles s’alignent sur la hauteur.

Comme j’ai fait ça (j’ai pas mal rouillé en six mois sans faire de CSS), les hauteurs des boîtes sont fixées (450px pour le cas présent). Si je vire cette valeur, tout se barre en couille, les boîtes prennent la taille que leur donne leur contenu, ce qui fait qu’elles n’ont donc plus la même hauteur. (parlant du contenu, je l’ai masqué pour éviter de me taper en plus la honte que tout le monde voie les conneries que je tape au lieu de copier/coller du lorem ipsum).

Si je rajoute du contenu en plus que ce que la boîte peut accueillir, ben le contenu sort de ladite boîte.

Donc voilà la bête question, c’est quoi l’astuce pour qu’une boîte prenne la hauteur que lui donne son contenu et entraîne ses deux copines avec elle?

La propriété overflow, qui peut prendre comme valeur visible, hidden, scroll ou auto.

.sortpas{ overflow: hidden; }
par exemple.

Tiens, la connaissais pas celle là, elle va servir.
Mais j’ai du mal m’exprimer (à cette heure-ci, pas étonnant).
Ce que je voulais, c’était pouvoir me dispenser de fixer une hauteur aux trois boîtes, que cela se fasse automatiquement, que la plus grosse au niveau contenu “dicte” la hauteur des deux autres…
Merci pour ta réponse en tout cas, ça m’a permis de découvrir un truc que je ressortirai à la première occasion

http://www.cssplay.co.uk/layouts/3cols.html

ce site est une mine d’or…

Merci bien, Webrunner.
J’ai essayé d’intégrer ça dans le code de mon truc, mais c’est tellement le merdier que ça déconne.
Maintenant, les boîtes ne laissent plus fuir leur contenu, mais elles ne se tiennent toujours pas au courant de leur taille respectivement (égoïstes de merde).
Le plus gros problème vient surtout de la compatibilité Moz/IE.
Je crois que je vais recommencer du début en partant de l’exemple que tu m’as filé et reconstruire là dessus, au moins j’aurai des bases solides.
Encore merci pour vos réponses rapides malgré l’heure tardive ('fin, il est presque tôt en fait B) )

Tu as deux solutions :

Faux Columns
Tu entoures tes 3 blocs par un bloc auquel tu mets une image de fond avec tes 3 colonnes.
http://alistapart.com/articles/fauxcolumns/

PVII Equal Height CSS Columns
Un javascript se charge d’adapter la taille des blocs
http://www.projectseven.com/tutorials/css/…lumns/index.htm

et en mettant tes 3 boites dans une 4eme boite, dont tu fixes la hauteur, puis en donnant une hauteur à 100% à tes 3 boites, ça va pas?

Faut éviter au maximum les hauteurs fixes, le jour où le contenu change, ça foire.

Ouais, c’est justement de là que vient tout le problème chez moi…

Pour le gros bloc et l’image de fond, ça risque de pas être possible, en fait. Le background du html est censé accueillir une image avec un dégradé qui sera visible par les espaces entre les colonnes ce qui interdit cette solution là.

Pour le javascript, je suis moyennement fan…

Le temps de me réveiller et je vais tenter le truc de Webrunner…

Une solution chez PositionEverything.net : l’avantage, c’est que, quelle que soit la colonne avec le plus “haut” contenu, la hauteur des autres s’adaptent aussi.

Une autre chez 456BereaStreet.com, qui utilise display:table.

Et aussi : fuk2k.org, mais il faut être sûr que la colonne centrale sera toujours la plus haute.

Perso, en adaptant la première, tu devrais y arriver sans trop de soucis. Même moi, j’y étais arrivée B)

[Ajout d’avis perso et totalement assumé : les solutions avec Javascript, cMal, beurk.]

Edit: ajouts de liens+explications.

Si vous pensez encore que le JavaScript c’est le diable, je vous conseille la lecture du bouquin Dom Scripting. Ca remet bien les idées en place B)