Modifier la hauteur de la colonne lorsque l'autre colonne devient plus longue

Question

J'ai essayé quelques solutions pour résoudre ce problème, mais je n'arrive pas à le faire fonctionner.

Le problème est que j'ai 2 colonnes comme la partie principale de mon site Web, droite et gauche. Sur certaines pages, il y a beaucoup de texte dans la colonne de gauche, donc c'est très long, le problème est que la colonne de droite ne s'allonge pas avec la colonne de gauche.

Les deux colonnes ont la même couleur de fond et un pied de page s'affiche sur la largeur des deux colonnes après la fin des colonnes. Mon premier réflexe était de placer les deux colonnes à l'intérieur d'une div qui aurait la même couleur d'arrière-plan et donc si la colonne de gauche était longue de 1500px et la colonne de droite de 600px (en raison des éléments qu'elle contient)) alors cela ne montrerait pas que la nouvelle div extérieure s'allongerait avec la colonne de gauche. Mais pour une raison quelconque, cela n'a pas fonctionné. Serait-ce parce que les colonnes sont flottantes?

Quelqu'un a-t-il d'autres idées?

Voici le site (évidemment pas encore fini): Beansheaf Hotel

J'ai choisi une page où il y a beaucoup de texte dans la colonne de gauche de sorte que le problème est évident. Merci à l'avance,

InfinitiFizz

Answer 1

Ce gars a résolu: http://www.ejeliot.com/blog/61

En outre, les commentaires plus bas sur cet article fournissent un ou deux autres approches, comme l'utilisation de l'affichage: table.

La nature flottante de vos colonnes est en effet la cause de la div contenant pas d'expansion, vous avez raison. Essayez donc d'utiliser la technique décrite ici: http://www.positioniseverything.net/easyclearing.html

Il est important de lire autour du sujet pour comprendre pourquoi, quoi et comment, parce que beaucoup de personnes trouvent le besoin de le faire tout le temps, pas seulement pour les mises en page en colonnes.

Answer 2

Vous pouvez attribuer à la div principale la propriété css display:table; que donner aux divs internes la propriété display:table-cell;. Sinon, vous devrez utiliser un <table> et placer le contenu à l'intérieur de <td> s. Le précédent vous donne quelque chose comme:

alt text http://img229.imageshack.us/img229/3209/divs.png

Answer 3

Voici un autre lien que j'ai trouvé utile:

http://www.alistapart.com/articles/fauxcolumns/