étirer la DIV jusqu'en bas de page

Ta colonne de droite (#sidebar) est en position absolue : elle est donc retirée du flux, et ne peut plus entrer en jeu dans le calcul de hauteur de son élément parent (#page). Elle ne peut pas non plus influer celle d'un élément voisin (#main)

Parmi les solutions, tu peux revoir cette mise en page en oubliant le positionnement absolu et en utilisant la combinaison habituelle :
- un float:left pour #main, avec une largeur en %;
- le flux, donc ni position, ni float, pour #sidebar, avec une marge gauche adaptée à la largeur de #main

Le flux étendra le conteneur #page en hauteur lorsque #main est plus court que #sidebar. Pour parer au cas où, à l'inverse, #main serait plus long que #sidebar, il suffira d'un overflow:visible sur #page.

Il te faudra également sortir le #footer de #page afin de le placer plus facilement en dessous de tout cela.

Tu trouveras sans doute un gabarit DotClear tout prêt avec ce type de disposition.

Au passage, une remarque sur la structure : mettre les titres <h2> après le contenu qu'ils concernent est une très mauvaise idée, qui leur fait perdre à la fois leur sens et leur utilité !

(Un détail, également : le pied de page n'est pas un titre).
Modifié par Laurent Denis (12 Jul 2005 - 05:31)

Laurent Denis a écrit :
Ta colonne de droite (#sidebar) est en position absolue : elle est donc retirée du flux, et ne peut plus entrer en jeu dans le calcul de hauteur de son élément parent (#page). Elle ne peut pas non plus influer celle d'un élément voisin (#main)

Ok je comprends. Donc il faut que je réintègre la sidebar dans la div #page.

Laurent Denis a écrit :
Parmi les solutions, tu peux revoir cette mise en page en oubliant le positionnement absolu et en utilisant la combinaison habituelle :
- un float:left pour #main, avec une largeur en %;
- le flux, donc ni position, ni float, pour #sidebar, avec une marge gauche adaptée à la largeur de #main

la combinaison habituelle...
Je vais essayer de faire ça ce matin. Juste une bricole dont je ne suis pas sûr, pour la largeur de main en %, je donne quoi ? sachant qu'elle doit prendre tout l'espace libre, c'est la seule div extensible, les autres sont de largeur fixe.

Laurent Denis a écrit :
Le flux étendra le conteneur #page en hauteur lorsque #main est plus court que #sidebar. Pour parer au cas où, à l'inverse, #main serait plus long que #sidebar, il suffira d'un overflow:visible sur #page.

compris.

Laurent Denis a écrit :
Il te faudra également sortir le #footer de #page afin de le placer plus facilement en dessous de tout cela.

vu.

Laurent Denis a écrit :
Tu trouveras sans doute un gabarit DotClear tout prêt avec ce type de disposition.

trop facile. Non non, je vais essayer de faire ça moi-même

Laurent Denis a écrit :
Au passage, une remarque sur la structure : mettre les titres <h2> après le contenu qu'ils concernent est une très mauvaise idée, qui leur fait perdre à la fois leur sens et leur utilité !

je suis d'accord. En fait j'ai installé ce template parce qu'il me plaisait, et une fois que j'ai ajouté mes plugins, etc. j'ai eu la flemme de tout reprendre à zéro avec un autre template. Je me suis rendu compte de tous ces détails un peu tard.

Laurent Denis a écrit :
(Un détail, également : le pied de page n'est pas un titre).

C'est le <h4> qui fait tache ? Bon, je vais arranger ça.

Merci beaucoup pour les conseils, je vais essayer tout ça de ce pas.

Bon j'ai fait quelques essais, sans trop de succès. Il y a 2-3 trucs pas très clairs...

1/ ma sidebar doit être alignée à droite, donc pour la marge, je dois la calculer par rapport à la droite de la fenêtre plutôt que par rapport à la div #main, non ? cette marge droite doit rester la même à priori (chiffre en px constant).

2/ la div #main prend toute la place restante (ce qu'il reste après la sidebar et les marges). J'ai quand même intérêt à lui attribuer une largeur en % ? Parce que ce %age va varier en fonction de la largeur de la fenêtre étant donné que le reste a une largeur fixe.

3/ je dois enlever le position : absolute; de la sidebar, mais par quoi dois-je le remplacer si je dois le remplacer par quelque chose ? Par un position: relative; ?

Pff je me demande si je n'ai pas rien compris.

Je vais sans doute devoir revoir le layout à partir de zéro pour être sûr d'avoir un truc à peu près propre

Bon, je travaille sur la version en ligne de mon site, c'est un peu pénible. J'essaierai ça ce soir en local tranquillement.

Merci pour les éclaircissements

je suis trop impatient, finalement j'ai fabriqué une petite page de test pour essayer ça :

www.effisk.net/misc/hfr/test/test.html

www.effisk.net/misc/hfr/test/style.css

bôfbôf.

A vrai dire, j'ai rencontré à peu près le même problême récemment, et me suis résolu à passer en tableau (en même temps, c'était pas un truc énorme).

Je ne vois toujours pas comment faire pour adapter la hauteur d'un div en fonction de son fils le plus grand... J'ai l'impression qu'il prend la hauteur du premier.

En tout cas, amuses-toi à mettre un élément en dessous, tu verras qu'il vient se caler sur la gauche, ignorant le menu de droite...
Même s'il n'est pas dans le même conteneur.
Si je trouve une solution, je pense à venir ici

Pour des données dynamiques, on revient souvent dessus, peut-être à tord, mais quand on manque de temps, et qu'on ne trouve pas de solution rapide...
Bah, hey, le côté obscur est plus rapide, plus facile!

Et puis, je ne veux pas jouer la mauvaise langue, mais les sites-modèle sur les CSS sont toujours des sites assez basiques sans réelles contraintes, uniquement informatifs. On voit rarement de structures compliquées.

Je pense qu'il faut faire la part des choses..
Cela dit, si on trouve la solution en CSS, c'est tout benef' ^^

bon bin finalement je suis revenu à mon point de départ, c'est-à-dire placer la div sidebar avant la div main dans le flux, tant pis pour le bon ordre.