Le positionnement inline-block

Les manipulations que demande le positionnement flottant se révèlent parfois un peu délicates sur des sites complexes. Dès qu'il y a un peu plus qu'un simple menu à mettre en page, on risque d'avoir à recourir à des clear: both; qui complexifient rapidement le code de la page.

Si le positionnement flottant reste, de loin, le mode de positionnement le plus utilisé sur le Web à l'heure actuelle, d'autres techniques existent et bien peu de webmasters le savent. L'une d'elles, étonnamment puissante, est passée sous le nez des concepteurs de sites web alors qu'elle existe depuis CSS 2.1, c'est-à-dire depuis plus de dix ans ! Elle consiste à transformer vos éléments en inline-block avec la propriété display.

Quelques petits rappels sur les éléments de type inline-block :

• Ils se positionnent les uns à côté des autres (exactement ce qu'on veut pour placer notre menu et le corps de notre page !).
• On peut leur donner des dimensions précises (là encore, exactement ce qu'on veut !).

Nous allons transformer en inline-block les deux éléments que nous voulons placer côte à côte : le menu de navigation et la section du centre de la page.

Ce qui nous donne comme résultat la figure suivante.

Le menu et le corps sont côte à côte… mais positionnés en bas !

Argh ! 
Ce n'est pas tout à fait ce qu'on voulait. Et en fait, c'est normal : les éléments inline-block se positionnent sur une même ligne de base (appelée baseline), en bas.

Heureusement, le fait d'avoir transformé les éléments en inline-block nous permet d'utiliser une nouvelle propriété, normalement réservée aux tableaux : vertical-align. Cette propriété permet de modifier l'alignement vertical des éléments. Voici quelques-unes des valeurs possibles pour cette propriété :

• baseline : aligne de la base de l'élément avec celle de l'élément parent (par défaut) ;
• top : aligne en haut ;
• middle : centre verticalement ;
• bottom : aligne en bas ;
• (valeur en px ou %) : aligne à une certaine distance de la ligne de base (baseline).

Il ne nous reste plus qu'à aligner nos éléments en haut (lignes 6 et 13), et le tour est joué (figure suivante) !

Le menu et le corps sont alignés en haut et côte à côte

Vous noterez que le corps (la <section>) ne prend pas toute la largeur. En effet, ce n'est plus un bloc ! La section occupe seulement la place dont elle a besoin.
Si cela ne vous convient pas pour votre design, modifiez la taille de la section avec width.

Et voilà ! Pas besoin de s'embêter avec les marges, aucun risque que le texte passe sous le menu… Bref, c'est parfait !

… Quoi ? Pardon, on me signale dans l'oreillette qu'un certain navigateur vient jouer les trouble-fête…

inline-block et compatibilité Internet Explorer

Le positionnement inline-block est parfaitement compris par Internet Explorer à partir de IE8.

Pour les anciennes versions, IE6 et IE7 en particulier, le positionnement inline-block fonctionne… mais uniquement sur les éléments qui étaient des inline à la base !

On peut heureusement régler ce problème avec une petite « bidouille » : si le navigateur est IE6 ou IE7, on transforme l'élément en inline et on change son comportement en lui donnant le layout (en lui affectant la propriété zoom: 1;). L'élément pourra alors être redimensionné.

Le layout est un mode d'affichage un peu particulier d'Internet Explorer, qui peut être la source de nombreux bugs. Comme cela devient rapidement très technique, je passe volontairement là-dessus et je vous invite, si le sujet vous intéresse, à consulter l'article sur HasLayout sur le site Alsacréations.

Pour commencer, il va falloir créer une seconde feuille de style CSS spéciale pour Internet Explorer 6 et 7. On va utiliser pour cela un commentaire conditionnel, que nous avions déjà aperçu auparavant, qui ne sera lu que par IE6 et IE7 :

Si le navigateur est IE6 ou IE7, une seconde feuille de style CSS, style_ie.css, sera chargée et viendra s'ajouter à la première. Dedans, nous ferons toutes nos « bidouilles » pour régler les problèmes liés aux vieilles versions d'Internet Explorer, afin que notre site s'affiche correctement chez tout le monde, même chez ceux qui vivent encore à la préhistoire ;-) .

Dans style_ie.css, rajoutez simplement le code suivant :

Voilà, c'est tout ! Dans votre feuille de style classique (style.css), continuez à utiliser inline-block comme avant. Ceux qui ont IE6 ou IE7 liront en plus ce code un peu spécial, qui leur permet d'obtenir le même résultat visuel !

Créé avec HelpNDoc Personal Edition: Création d'aide CHM, PDF, DOC et HTML d'une même source