CSS bottom div
On m'a posé la question de savoir comment poser une div en bas d'un autre div. La réponse en CSS est en fait très simple, mais il s'agit de connaître la méthode. En premier lieu, on va se mettre en situation et créer un document HTML en y appliquant une feuille de styles. Voici un exemple de div que vous pouvez avoir à mettre en forme
<div class="container">
<p>Ici du contenu, du texte, des images etc...</div>
<div class="bottom">
<p> Et ici du texte à place en bas de la div</p>
</div>
</div>
Très bien, maintenant, admettons que nous décidions que cette div fasse 150px de large sur 180px de haut: Je met des couleurs de fond pour que vous puissiez bien voir les limites de notre conteneur:
.container {
background: #AAA none;
width: 150px;
height: 180px;
}
.container .bottom {
background: #AEE none;
}
Le résultat est le suivant:
Pour le moment, ça coince, on aimerait avoir la div bleuté en bas du div.
La solution ? Il faut que la div "contenante" ait une position relative, et que la div à placer en bas soit en position absolue ! Reste alors à définir la propriété "bottom" à "0" pour placer la div bleuté en bas de son conteneur:
.container {
background: #AAA none;
width: 150px;
height: 180px;
position: relative;
}
.container .bottom {
background: #AEE none;
position: absolute;
bottom: 0
}
Ce qui nous donne le résultat escompté:
C'est simple, efficace et surtout très utile pour mettre en forme des "footer" de ticket de blog, des liens en bas d'articles, etc... Bref, quand le CSS nous tient :)
Il y a une autre solution, plus tordue... Assigner la div à placer en bas en position relative, et jouer avec sa propriété "top" qui doit être égale à la taille du conteneur moins celle de la div à descendre. Dans notre cas cela donne (à taton) 100px:
.container {
background: #AAA none;
width: 150px;
height: 180px;
position: relative;
}
.container .bottom {
background: #AEE none;
position: relative;
top: 100px
}
Même résultat, mais vous aller perdre pas mal de temps à trouver la valeur de "top". En fait c'est à vous de voir. Parfois la seconde solution permet de corriger des soucis de z-index perdu avec une position absolue, parfois ça engage d'autre soucis. Choisissez la méthode qui va le mieux pour votre cas.
Pas de commentaire pour le moment
Trackbacks
Pour ajouter un trackback (retrolien) sur ce ticket, utilisez cette adresse: http://www.metal3d.org/index.php/trackback/default/tb?id=blog%2F237
