[Résolu] Aligner un DIV sur le bas

Bonjour à tous,
Je souhaiterai aligner le Div en pointillés rouges sur le bas comme indiqué sur cette page.
(en tenant compte du fait que le div en vert a une hauteur variable)

Quelle est la meilleure façon d'y parvenir dans ce cas précis?

En vous remerciant.
Modifié par WildInTheWoods (18 Feb 2009 - 18:14)

Ok, je viens de lire le Guide de survie du positionnement CSS et le plus simple c'est encore un bon vieux tableau pour ça..

WildInTheWoods a écrit :
Ok, je viens de lire le Guide de survie du positionnement CSS et le plus simple c'est encore un bon vieux tableau pour ça..

Ouais ben je crois que tu vas relire l'article plus sérieusement

Et pour la peine tu liras également :
- Initiation au positionnement en CSS, sur Alsacreations (Partie 1 et 2)
- Initiation au positionnement CSS, sur OpenWeb (Partie 1, 2 et 3)

Merci Belig.

Il est écrit dans le Guide de survie du positionnement CSS:

a écrit :
Enfin, le centrage vertical est le point compliqué. À l'heure actuelle, la solution la plus compatible pour centrer verticalement un bloc est d'utiliser un tableau de mise en page. À l'avenir, on pourra utiliser display: table-cell sur un bloc conteneur pour centrer son contenu avec vertical-align: middle.

A mon avis c'est pas mon manque de sérieux qui est en cause.. Ou alors faut que j'aille apprendre à lire? Vrai ou bien?

WildInTheWoods a écrit :
Ou alors faut que j'aille apprendre à lire?

C'est pas un problème de lecture, mais de compréhension.

a écrit :
Enfin, le centrage vertical est le point compliqué. À l'heure actuelle, la solution la plus compatible pour centrer verticalement un bloc est d'utiliser un tableau de mise en page. À l'avenir, on pourra utiliser display: table-cell sur un bloc conteneur pour centrer son contenu avec vertical-align: middle.

Centrer verticalement et positionner en bas à gauche, c'est la même chose pour toi ?

Oui en effet il s'agit bien de centrer en bas et non pas verticalement. Je n'ai pas lu sérieusement le guide tu as raison..
Je viens de lire les deux autres liens que tu m'as cordialement invité à consulter. Et je n'y ai pas trouvé d'indice concernant mon problème d'alignement d'un div en bas vis à vis d'un div adjacent dont la hauteur est variable (cf. mon visuel ici).

Merci en tout cas d'avoir pris le temps de m'indiquer où se trouve ici la doc sur le positionnement en CSS.

Ceci dit j'ai quand même échappé à une réponse du style: T'as pas lu tout le forum ou t'as qu'à faire une recherche sur Google.. Parce que comme tu dois le savoir il n'est pas écrit noir sur blanc comment positionner un div en bas vis à vis d'une hauteur non définie comme dans mon cas et si je viens poser une question ici c'est peut-être aussi pour m'éviter de consulter tout une doc sur le sujet dont seulement une petite partie m'intéresse et ce, pour me dépanner ponctuellement sur ce problème bien précis vu que ce n'est pas mon domaine.

Personnellement lorsque je maîtrise le sujet je donne la réponse suivie d'un ou plusieurs liens si le gars est curieux. Sauf si la question est vraiment de base faut pas abuser non plus. Mais à mon avis elle est pas si "de base". D'autres préfèrent ne rien donner du tout et renvoient purement et simplement à la doc. Enfin tu as été quand même bon en m'évitant un lien vers le W3C

WildInTheWoods a écrit :
Je viens de lire les deux autres liens que tu m'as cordialement invité à consulter. Et je n'y ai pas trouvé d'indice concernant mon problème d'alignement d'un div en bas vis à vis d'un div adjacent dont la hauteur est variable

Mmmh...

WildInTheWoods a écrit :
Personnellement lorsque je maîtrise le sujet je donne la réponse suivie d'un ou plusieurs liens si le gars est curieux. Sauf si la question est vraiment de base faut pas abuser non plus. Mais à mon avis elle est pas si "de base".

Et pourtant...

Bon j'vais t'aider encore un peu en te donnant les ingrédients :
- 3 <div>,
- 1 position:relative,
- 1 position:absolute,
- 1 left:0,
- 1 bottom:0,
- 3 width,
- 1 height,
- et 1 margin-left.

Rien de plus. Tu n'as plus qu'à suivre la recette (en plus j'avais laissé un indice dans mon premier post, tu n'es pas très observateur...).
Modifié par BeliG (18 Feb 2009 - 15:16)

3 height???

J'ai bien peur que nous ne parlions pas du même problème..

WildInTheWoods a écrit :
3 height???

J'ai bien peur que nous ne parlions pas du même problème..

Où ça 3 height ?

Faut vraiment que j'apprenne à lire..

je vois pas quel div dois être en position: absolute; vu que les deux div contenus sont positionnés à l'intérieur du div conteneur...

WildInTheWoods a écrit :
je vois pas quel div dois être en position: absolute;

Sérieux tu fais exprès ?

Le div conteneur est en position absolute? Quel intérêt?

Sachant que le but du div conteneur est de déplacer les deux div contenus en "bloc" si je veux ajuster le tout. Je me fais bien comprendre?

WildInTheWoods a écrit :
Le div conteneur est en position absolute?

Tu as l'air de bien t'amuser avec moi..

Quel intérêt de positionner l'un des div contenus en absolute si leurs positions dépendent toutes deux de celle du div qui les contient?

Hello,

Je crois que tu t'emmêles effectivement les pinceaux.

Si ce que tu veux obtenir est que le bloc rouge se place toujours en bas du bloc bleu, le plus simple me semble être :
- bleu : position: relative
- rouge : position absolue + bottom : 0

Explications

Bonne chance.

WildInTheWoods a écrit :
Quel intérêt de positionner l'un des div contenus en absolute si leurs positions dépendent toutes deux de celle du div qui les contient?

Je ne comprends pas ta question. Si le blog rouge est en absolu en bottom 0 et que le bloc bleu est en position relative, alors le bloc rouge se positionnera par rapport au bloc bleu.
Modifié par Raphael (18 Feb 2009 - 16:21)

WildInTheWoods a écrit :
Sachant que le but du div conteneur est de déplacer les deux div contenus en "bloc" si je veux ajuster le tout. Je me fais bien comprendre?

La <div> conteneur ne déplace rien du tout. Elle a en fait 2 fonctions :

- S'étirer en hauteur (en fonction de la hauteur de l'enfant qui est dans le flux, donc qui n'est pas positionné absolument),
- Servir de référence à son enfant positionné absolument.

WildInTheWoods a écrit :
Quel intérêt de positionner l'un des div contenus en absolute si leurs positions dépendent toutes deux de celle du div qui les contient?

Mais l'intérêt de positionner en absolute, c'est de pouvoir placer une <div> n'importe où dans un conteneur parent, indépendamment des autres éléments ! N'importe où = en bas à gauche !

WildInTheWoods a écrit :
Tu as l'air de bien t'amuser avec moi..

A fond.

Raphael a écrit :
Si ce que tu veux obtenir est que le bloc rouge se place toujours en bas du bloc bleu, le plus simple me semble être :
- bleu : position: relative
- rouge : position absolue + bottom : 0

Explications

Tu m'as cassé mon délire.

Merci!!! Le css est-il correct ce coup-ci?

Le code:

    #conteneur,  #contenu, #bas_gauche {
        padding:20px;
    }
    #conteneur {
        position: relative;
        margin-left: auto;
        margin-right: auto;
        width: 500px;
        border: 4px dashed #0000FF;
      }
    #contenu {
        width:250px;
        height:500px; (Variable en fonction du contenu)
        background-color: #00FF00;
        margin-left:210px;
      }
    #bas_gauche {
        position: absolute;
        bottom: 20px;
        width: 150px;
        height: 120px;
        background-color: #FF0000;
      }

    <div id="conteneur">
        <div id="contenu">
        </div> 
        <div id="bas_gauche">             
        </div>
    </div>