[résolu] Aligné une div vers le bas

bonjour,
premier message sur ce forum qui m'a l'air pas mal du tout...

je m'initie au CSS, et tante d'aligner une div vers le bas, dans
l'espoir de réussir un template qui s'adapte en hauteur et largeur...
j'ai réussi la partie largeur, j'aimerais bien réussir la partie hauteur...

comme un bout de code vaut mieux qu'un long discours...

voici le code html:

<div id="global">
    <div id="left">
        <div id="top_left"></div>
        <div id="mid_left"></div>
        <div id="bot_left"></div>
    </div>
</div>

c'est la balise bot_left que je cherche à aligner vers le bas, sachant que son "conteneur" (left)
peut changer en hauteur, que bot_left et top_left ont une hauteur fixe, et que mid-left n'a pas de hauteur afin qu'il s'adapte en hauteur en fonction de la hauteur du conteneur "left"
(ce principe fonctionne à l'horizontal en tous cas...)

voici maintenant le code CSS:

<style type="text/css">
<!--

#global {
	position:absolute;
	width:500px;
	height:500px;
}
	#left {
		width:50px;
		height:100%;
		background:#ccc;
	}
		#top_left {
			height:100px;
			background:#333;
		}
		#mid_left {
			min-height:10px;
			background:#666;
		}
		#bot_left {
			height:100px;
			background:#999;
		}
-->
</style>

y'a t'il quelque chose que je puisse faire pour que bot_left s'aligne vers le bas?
j'ai essayer vertical-align, mais ça n'y fais rien, pas plus que margin-bottom:0px

manque de connaissances...
si quelqu'un pouvait me guider, m'orienter...

je vous en remercie.
Modifié par elran (12 Mar 2010 - 00:17)

Rajoute ça.

#left {
position: relative;
}

#bot_left {
position: absolute;
bottom: 0;
}

Ton #left servira de référence pour que #bot_left soit en absolute par rapport à lui.

À noter que la propriété vertical-align ne peut s'appliquer à ton élément div que si tu lui déclares la propriété display avec l'une des valeurs suivantes : inline (ici ça ne peut coller, puisque tu définies des dimensions), inline-block, table-cell. Voir le tutoriel Mise en page CSS avancée grâce à la propriété display.
Modifié par Victor BRITO (11 Mar 2010 - 14:54)

MoOx:
merci pour ta réponse, en revanche, ça ne fonctionne pas...
j'ai essayer avec bottom:0; et bottom:0px;
ou encore margin-bottom:0/0px ...
(Edit: ça change bien quelque chose: elle disparait... peut être vers le bas)


Victor:
merci pour le lien, mieux vaut que j'en passe par là, et puis, j'aime bien aussi
la petite phrase d'intro du tuto: "parce que les tableaux avaient du bon..."

pour un langage simple, c'est très compliquer à appréhender le CSS je trouve...
mais je suis novice, ça fait une semaine que je m'y mets vraiment, j'imagine que
dans quelques temps ça ira mieux.
Modifié par elran (11 Mar 2010 - 16:24)

manifestement y'a des choses qui m'échappent avec "display", bloc, inline, etc.

le tuto ne m'aide pas non plus, je vais continuer à parcourir le forum!

bon j'ai réussi, en sortant ma div de la colonne pour la mettre juste à la suite.

<div id="global">
    <div id="left">
        <div id="top_left"></div>
        <div id="mid_left"></div>
    </div>
    <div id="bot_left"></div>
</div>

du coup j'ai juste eu à lui ajouter une largeur dans le css, qu'il ne prenne pas toute la largeur de global...

je trouve ça très curieux comme façon de faire, mais ça fonctionne.
Modifié par elran (11 Mar 2010 - 19:16)

bon autant pour moi ça fonctionne parfaitement bien ce que tu disais MoOx!

je sais pas ce que j'ai foutu la première fois pour que ça ne fonctionne pas...

en tous cas merci, c'est plus élégant que la fausse solution que j'avais.