N’avez-vous jamais été confronté au problème d’alignement en utilisant la propriété CSS « float » dans le but de juxtaposer plusieurs éléments de type « block » ?
Cette époque est révolue ! En effet, Ryan Doherty a créé un hack avec la propriété CSS inline-block qui s’avère fort utile pour généraliser son utilisation, jusqu’à lors, limitée du fait de sa non-implémentation dans certains navigateurs..
Je me suis donc empressé de tester ce petit bout de code!
Avec l’utilisation de la propriété CSS « float » sur plusieurs éléments de type « block », vous aviez un rendu comme ceci lorsque le contenu d’un bloc était plus long que les autres :
Lorsqu’un élément est plus long il fait buter sur lui, ceux de la ligne suivante.
Voici donc, le rendu avec la propriété CSS inline-block qui permet un retour à la ligne systématique même avec des blocs de hauteurs différentes :
Un résultat plus que convaincant quelle que soit la hauteur des éléments de type « block » ! Malheureusement, cette propriété n’est pas comprise par tous les navigateurs, d’où le hack que j’ai personnellement testé : propriété CSS inline-block et son hack sur les navigateurs suivant : IE6-7-8, Firefox, Chrome, Safari & Opera. Succès garanti !
Quelques explications :
/* Pour Firefox 1 & 2 */
display: -moz-inline-stack;
/* Propriété standard */
display: inline-block;
/* Pour IE 6 & 7 : nécessaire pour le HasLayout (propriété suivante) */
*display: inline;
/* Pour IE 6 & 7 : HasLayout, permet d'obtenir un comportement identique à la propriété inline-block */
zoom: 1;
