CSS bottom div

04/11/2009

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.

Ça peut vous intéresser aussi


CSS transformations transitions animations

Les animations dans une page web, Dieu sait à quel ...


Minifier simplement vos CSS et Javascript

M’amusant un peu avec mon serveur pour corriger quelques ...


Du CSS dynamique

J’adore le CSS, c’est un fait. L’avènement ...


CSS 3 et tant pis pour les autres

Un truc me titillent les neurones depuis quelques temps, et ...

Merci de m'aider à financer mes services

Si vous avez apprécié cet article, je vous serai reconnaissant de m'aider à me payer une petite bière :)

Si vous voulez en savoir plus sur l'utilisation de flattr sur mon blog, lisez cette page: Ayez pitié de moi

Commentaires

Ajouter un commentaire

Ajouter un commentaire

(*) Votre e-mail ne sera ni revendu, ni rendu public, ni utilisé pour vous proposer des mails commerciaux. Il n'est utilisé que pour vous contacter en cas de souci avec le contenu du commentaire, ou pour vous prévenir d'un nouveau commentaire si vous avez coché la case prévue à cet effet.