Probleme colonne factice

Bonjour à tous,

Un petit souci CSS que je vous apporte sur un plateau d'argent.
Sur ma page j'ai un conteneur avec une en repeat-y. Ce conteneur de 960px est
centré avec margin auto.

Ensuite dans ce conteneur j'ai deux colonnes :

#colonne-gauche  {float: left; width: 600px;}
#colonne-droite {margin : 600px;}

Mon problème est que l'image de fond ne descend pas jusqu'en bas, elle s'arrête au niveau de la colonne de gauche car celle ci est en float left.

Pour l'instant la seule solution que j'ai c'est de mettre un conteneur autour des deux colonnes et d'y mettre une hauteur.

dans ce style :

#conteneur-colonne {height : 400px;}

Merci à tous
Modifié par lkadiss (03 Nov 2010 - 17:26)

Salut,

Il vaudrait mieux que tu laisse ton contenu dans le flux, car c'est lui qui est le plus susceptible à variation de longueur. Par contre, ta colonne droite devrait généralement être plus courte, et pour palier aux problèmes dans les pages où ça ne sera pas le cas, un clear sur une zone de pied de page résoudra le problème.

Hello,

En complément de (ou variation sur) ce que dit Mikachu:

1. Il te faut de toute façon un conteneur qui va englober tes deux colonnes (ou bien les deux colonnes + le blog gris), pour lui appliquer l'image de fond répétée en hauteur qui dessine les colonnes sur toute la hauteur.

2. Il faut ensuite forcer ce conteneur à s'adapter à la hauteur des éléments flottants qu'il contient. Pour ça, il faut d'abord éviter de lui donner une hauteur fixe. Ensuite, il faut lui dire de faire rentrer les flottants dans le rang (sinon ces derniers dépassent allègrement). Il y a plusieurs manières pour ça. Tu peux faire une recherche sur ce sujet, mais une technique possible est d'utiliser un contexte de formatage sur ton conteneur, en utilisant la propriété overflow avec la valeur "hidden" ou "auto". Tu peux aussi utiliser display:table (attention, pas compatible IE7), par exemple. Enfin, tu peux placer un élément à la fin du conteneur, et appliquer un clear:both sur cet élément.
Chaque technique a ses inconvénients et avantages, que je ne liste pas ici car ça serait un peu long. On apprend à les connaitre avec l'expérience.

Merci pour vos réponses...j'ai opté pour le overflow:hidden
je ne connaissais pas c'est très bien, je trouve que c'est la solution la plus polyvalente...
Avant j'utilisais la methode de mettre un élément tout en bas avec un clear, mais je trouvais ca pas très joli

Hors sujet mais florent j'aime beaucoup ta signature...je ne développerai pas, je pourrai y passer de heures

Merci
Modifié par lkadiss (05 Nov 2010 - 00:27)