Aligner un contenu en bas d’un DIV

Voir en ligne : Page d’exemple

Je reçois régulièrement des visites sur ce blog, provenant d’un vieux sujet ouvert sur le forum Webmaster de JeuxVideo.com, où je demandais s’il était possible d’aligner un élément en bas d’une balise <div>. Le lien menait vers une page d’exemple, qui a été redirigée vers la racine de ce site lorsque je l’ai créé. Voici maintenant cette erreur corrigée.

La technique de l’époque

Bien entendu, il est très facile de le faire en utilisant un tableau : l’alignement en bas de cellule fonctionne parfaitement. Toutefois, à l’époque je commençais à redécouvrir le HTML et les CSS, et je faisais l’erreur de beaucoup de webmasters débutants : bannir les tableaux HTML, et tous les remplacer par des balises div.

Ce raisonnement était mauvais, pour les deux raisons suivantes :

  • En HTML, les tableaux ont une utilité ! Il est totalement illogique de vouloir s’en passer. Il est par contre vrai qu’ils avaient été, à l’époque, utilisés en tant que tableaux de présentation destinés à combler certaines lacunes des anciens navigateurs. De nos jours, l’utilisation de tels tableaux est contournable.
  • Remplacer tous les tableaux par des divs [1] est également absurde : en HTML, le <div> est un élément vide de tout sens sémantique : remplacer des tableaux par ces éléments, c’est arrêter de faire une erreur pour en faire une autre !

Malheureusement, à l’époque où j’avais rédigé ce sujet (En 2005), il n’existait aucun autre moyen de réaliser ce que je demandais que d’utiliser un tableau.

La technique actuelle

Aujourd’hui, les navigateurs ont énormément évolué concernant la gestion des CSS, et il est désormais possible de répondre à cette demande.

Comme cette fonctionnalité fonctionne avec des cellules de tableau, il suffit tout simplement de dire à cette balise [2] de se comporter ... comme une cellule de tableau !

#element {
     display: table-cell;
     vertical-align: bottom;
}

Et le tour est joué !

Qu’est-ce qu’on attendait, alors ?

Si on s’en réfère aux recommandations du site Can I use..., les premiers navigateurs à l’intégrer furent Firefox 2 et Opera 9, en 2006. Il a fallu attendre Internet Explorer 8 en 2009 pour que tous les navigateurs récents du marché proposent la fonctionnalité [3].

Voir en ligne : Page d’exemple

Notes

[1Certains webmasters ont surnommé cette tendance divite

[2N’importe laquelle donc, pas spécifiquement un <div>

[3Et sans doute plus encore avant que le nombre de navigateurs sous les versions antérieures d’Internet Explorer ne diminue, mais la fonctionnalité n’étant pas vitale, ça ne pose pas véritablement de problème

Laissez votre commentaire