[résolu] Alignement elastique de div vers le bas

bonjour,

après lectures des articles du forum, je n'ai pas trouvé mon bonheur...
Ma page se compose de 3 blocs horizontaux : menu à gauche, contenu au centre, actu à droite.
Et un pied de page...
J'aimerai que, meme si mon contenu au centre est très long, le menu à gauche et l'actu à droite s'étire, notamment pour les images de fond...afin que le tout soit aligné avec le pied de page...

j'ai essayé avec un div contenant l'image de fond dans chacune de mes 2 colonnes menu et actu, dont le height=100% et bien sur, la page fait un kilometre vers le bas.
Les zones incriminées sont celles contenant le mot "test" dans mon exemple ci dessous.
Dans mon exemple, on peut voir directement que les pointillés de la partie menu à gauche se continuent pas jusqu'au pied de page, et il en est de meme pour la partie actu si je clique sur "+" de mon contenu au centre : la page s'allonge mais pas le bloc actu...

voici la page en ligne :
http://www.13enforme.com/extras/cris/

Merci de la visualiser avec FF et pas IE, car j'ai encore des soucis d'affichage sous IE

merci de votre aide, car je cale !
Modifié par jp.bond (21 Jul 2009 - 20:25)

Je n'ai pas la solution mais une piste de départ.

Commence par ajouter overflow:hidden; à "#contenu". Car l'utilisation de float dans les div qu'il contient, les ont fait "dépasser" donc on utilise cette propriété pour les réintégrer dans leur conteneur.

Sachant que c'est ce conteneur qui va déterminer la hauteur de la totalité de ton contenu ça sera certainement utile.

En revanche je n'ai pas la réponse pour forcer ton bloc de gauche à s'adapter à cette hauteur.

Bon en fait j'ai trouvé une solution

#contenu {
    background-image:url(images/fond_droite_pourcent.jpg);
    background-position:right top;
    background-repeat:no-repeat;
    margin:0;
    min-width:1024px;
    overflow:hidden;
    position:relative;
    width:100%;
}

#contenu-gauche {
    background-image:url(images/separateur_vertical.jpg);
    background-repeat:repeat-y;
    float:left;
    height:100%;
    position:absolute;
    width:243px;
}

#contenu-centre {
    float:left;
    left:250px;
    margin:5px;
    min-width:403px;
    position:absolute;
}

Par ailleurs, en faisant comme ça il me semble que tu n'as plus besoin du paramètre min-width.
Modifié par moust (21 Jul 2009 - 22:03)

yeeeeeeeeeeeeeeeees !!!
'tain ! ca marche !!!!
merci merci merci vraiment beaucoup !
Mais maintenant il faut que je comprenne ce que tu as changé et que je maitrise cette modif pour me coucher un peu moins con ce soir !
je vais comparer les 2 codes pour saisir les subtilités car pour l'instant les div en css, c'est un peu obscure pour moi et m'attaquer aux différences d'affichage dans IE

mais en vraiment merci encore de ton aide précieuse !

J'ai un dernier soucis mais je vais le reformuler dans un sujet indépendant...merci de tes conseils en tout cas
Modifié par jp.bond (23 Jul 2009 - 13:16)