[résolu] Le div principal ne prend toute la hauteur voulue

Bonjour,


J'ai décidé de me lancer plus sérieusement dans les CSS et en lisant différents sujet sur le forum je me suis dit que je me lancerais bien dans la mise en page d'une galerie photo pour apprendre (comme clb56). Pour la présentation des photos, j'ai utilisé les listes de définitions comme dans cet article de Pompage et j'ai ajouté le petit script thickbox.

Toutes les galeries sont contenues dans un div #content mais malheureusement celui-ci n'a pas l'air de vouloir s'agrandir avec son contenu. Si je met un h2 à la fin bizarrement ça fonctionne… Je ne comprend plus, j'ai pourtant mis un HR pour jouer ce rôle.

Est-ce que vous avez une idée du pourquoi du comment?

Merci d'avance.

la galerie

P.S. : j'ai mis un min-height sur le div pour donner une idée…

Tu peux rajouter ça dans le code, pour voir :

div#galerie {background: red; overflow: auto;}

Les flottants (dl) à l'intérieur de div#galerie sortent du flux de leur bloc parent. Il faut donc trouver un moyen de les y faire rentrer.

Un clear: left ou clear: both est une solution, déjà appliquée sur les h2 (qui, en passant, pourraient se contenter d'un clear: left), ce qui explique que seuls les flottants qui ne sont pas suivis d'un titre dépassent.

Il y en a d'autres, dont l'overflow utilisé dans le code ci-dessus.
Plus en détail :
http://web.covertprestige.info/test/03-elements-flottants-et-element-parent-1.html

Dans tous les cas, c'est du bloc div#galerie qu'il faudra s'occuper.

PS 1 : il y a un hr, mais en display: none, du coup c'est comme s'il n'était pas là.
PS 2 : la technique utilisée pour appliquer un height: 100% à Internet Explorer uniquement est assez peu pratique. Les commentaires conditionnels seraient plus adaptés. Au fait, il me semble que min-height: 100% n'a pas d'effet sur html avec certains navigateurs... la solution la plus robuste consiste à mettre html et body en height: 100%, et d'utiliser un conteneur global en min-height: 100% (height: 100% pour IE jusqu'à la version 6 incluse).
Modifié par mpop (05 Jan 2007 - 21:34)

Merci mpop je vais essayer ça. Pour l'histoire du min-height, c'est ce qui est recommandé pour le fonctionnement du script mais si c'est spécifique à IE, je vais les mettre, comme tu dis, en commentaires conditionnels. Je n'avais pas très bien compris la raison de ces règles CSS.

Super ça marche!

Demain je mettrai les comentaires conditionnels et je fignolerai… Y'a encore le problème du footer (mais là je devrais y arriver) et voir ce qu'il y a lieu de faire dans le cas de photos en portrait.
Modifié par Patidou (06 Jan 2007 - 00:33)

Corrections faites. Sujet résolu.
Modifié par Patidou (07 Jan 2007 - 14:58)