[CSS] div et persistance background

Fermé
kursus - 11 oct. 2007 à 17:53
 krusus - 12 oct. 2007 à 10:51
Bonjour à tous,

Je suis face à un petit souci dans la construction de mon site.

Il est structurellement composé de trois colonnes, une petite de chaque coté, et une grande au milieu.

Mon div "content" contient donc un div "colonne_gauche", un div "contenu" et un div "colonne_droite".

"Colonne_gauche" et "colonne_droite" sont associées à des backgrounds jpeg (un différent pour chaque).

La hauteur de ma page est basiquement définie par la hauteur du div "contenu", les side colonnes étant principalement décoratives.

Mon problème est que, autant la colonne gauche, même lorsqu'elle est vide, est de la même hauteur que "contenu" (et affiche le background en conséquence), autant la colonne droite ne m'affiche rien du tout lorsque je la laisse vide. Je suis obligé d'y aller à coups de <br /> pour que la colonne s'étende et donc que le background s'affiche.

Outre le fait que ca ne soit pas très propre comme méthode, j'ai surtout le soucis de voir que IE et Firefox ne rendent pas des pages de même hauteur (plus il y a de contenu, plus la différence est grande) pour une page donnée, ce qui m'oblige à jongler avec les <br /> pour me retrouver avec un background ou trop court, ou trop long selon le navigateur!

Ce problème ne s'étend pas à la colonne gauche, je suis débutant dans l'art du développement web mais je suppose que c'est du au fait qu'elle soit positionnée avant le contenu et qu'elle bénéficie automatiquement de la hauteur de "contenu".

Bref, ma question est donc: il y a-t-il un moyen pour que la colonne droite s'ajuste automatiquement en hauteur à mon div "contenu" ?

Je précise que le fait de préciser "height: 100%" dans la feuille de style pour "colonne_droite" n'a aucun effet chez moi.

Merci de vos réponses.
kursus
A voir également:

1 réponse

Bonjour,

conseil de pro: ne pas utiliser les <br/> pour la mise en forme du document.
pour votre problème: aller voir http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/design-trois-colonnes-positionnement-flottant

voir aussi: https://www.alsacreations.com/
0
Bonjour,

Merci pour le lien.

Sur http://www.pompage.net/traduction/colonnesfactices , j'ai pu voir que mon problème est très courant et inhérent à CSS. L'auteru propose une solution à base d'un background large comme les trois colonnes, pour créer une illusion de séparation.

Malheureusement, j'ai un background qui est loin d'être "plain" donc je ne peux adapter cette solution à mon problème.

Je me contenterais donc de définir une hauteur fixe en pixel pour ma colonne droite, quiite à créer une nouvelle entrée dans ma feuille de style pour chaque page.

Pas très pratique, mais je n'ai pas trouvé mieux. Si quelqu'un a une suggestion....

Merci en tout cas.
kursus
0