[Résolu] Placer une image en bas d'un div plus haut que l'écran

Bonjour,

J'ai créé une colonne : <div style="width:200px;float:left"> (en BLANC sur le schéma)
dont la hauteur est déterminée par celle de la 2e colonne, à droite (en JAUNE).
La colonne BLANCHE a en effet peu de contenu, tandis que la JAUNE est le conteneur principal.

En outre, la page est trop longue pour s'afficher entièrement à l'écran.
La page est en effet plus haute que la fenêtre d'affichage de Firefox (ORANGE).

Je souhaite placer une image sur l'extrémité basse de la colonne blanche (en VERT).
J'ai tripoté mes CSS avec des position absolute/fixed, des bottom nuls, etc.

Rien à faire : le cartouche se positionne au mieux en bas de la fenêtre (ROUGE)
mais pas au bas de la colonne (VERT) comme je le souhaite.

Z'auriez pas une 'tite idée ?...
D'avance, merci.

http://albat.fr.free.fr/phpfrance/bas.png

NB : Cette question a été précédemment posée sur le forum PHPFrance, mais on est plus forts en PHP qu'en CSS...
Modifié par Albat (04 Nov 2006 - 21:13)

Bonjour,

Et :

<div style="width:200px;float:left; position: relative">
<img src="ton_image" style="position: absolute; bottom: 0" />
</div>

Non?

Hélas, non.

En fait, j'ai oublié de tout dire dans mon message :
cette solution fonctionne avec Firefox, Opera, etc.
mais pas avec IE 6 qui ne gère pas le placement avec bottom.

<div style="width:200px;float:left; position: relative">

<img src="ton_image" style="position: absolute; top: 190 px" />
<!-- top ou tu veux en fait ça dépend du width de ton image -->

</div>

Hélas, je ne peux pas placer mon image (verte) en fonction du top
car la colonne blanche est de hauteur variable...

Re,

Bottom passe très bien chez moi avec IE6 !!

Non, ça ne fonctionne pas pour moi.
Mais tes remarques et propositions m'ont fait penser à une autre possibilité
que je viens de tester... et qui marche !

Le bottom:0 ne pouvait fonctionner que si la hauteur de la colonne blanche
était identifiée comme étant égale à celle de la colonne jaune.
Comme celle-ci est entièrement variable... bonne chance !

En revanche, j'avais oublié d'inclure sur mon schéma l'existence d'un bas de page
sur toute la largeur du bloc (colonne blanche + colonne jaune).

Ce bas de page étant en position:relative,
il est forcément placé en bas de la plus grande des deux colonnes.
J'ai alors placé l'image verte dans ce pied de page en lui appliquant un top:-200px.

Et c'est nickel !

En tout cas, Firefox 2.0, Opera 9 et IE 6 sont contents.
(Pour IE 7, Safari et consorts, je ne sais pas...)

Merci pour tes propositions !

Bonjour,

J'allais te proposer un bloc "invisible" en footer avec un margin négatif mais je vois que tu es allé plus vite que moi ...

C'est exactement ça !

Quand je pense au temps que j'ai passé là-dessus...