Mise en page HTML & CSS : les éléments flottants et le "inline-block"

Comme vous l'aurez remarqué sur ma page d'accueil, j'ai fait le choix délibéré d'aligner mes textes avec, à gauche, un article et, à droite, un encart. Le premier encart est utilisé pour retranscrire l'actualité du site et les autres encarts sont des petits "post-its" portant sur un sujet précis.

Il y a deux méthodes pour élaborer cette mise en page.

I. les éléments flottants

Vous pouvez choisir d'inclure un élément dit "flottant" sur votre site. Il s 'agira d'un petit encart dont vous choisirez le positionnement dans votre stylesheet.css en inscrivant float : right dans mon cas.

Pour cela il faut délimiter votre élément flottant dans votre code HTML en lui attribuant une classe :

Ex :

Au niveau du code CSS, il faudra jouer avec une margin-top négative pour que l'élement flottant soit aligné avec le texte d'à côté

Et cela donne

A noter que les éléments flottants sont déconseillés en cas de responsive design (navigation adaptée aux smartphones et tablettes) car l'élément est considéré comme "indépendant" et ne s'affiche pas correctement.

II. Inline-block

Pour ma page d'accueil, j'ai préféré la solution de l'inline-block à celle de l'élément flottant. Plus simple, plus rapide, pas de problème d'alignement.

Le display inline-block permet d'afficher des textes côte à côte. Pour cela il faut inclure les textes concernés dans un espace propre.

Exemple :

Pour ma part, j'ai placé mon article et mon encart "actualités" dans une "section". Vous voyez ci-dessous une première section composée d'un article et d'un encart "actualités". Ainsi qu'une deuxième section avec un autre article et un encart intitulé "commentaires".

Pour le moment, ces deux composantes des sections apparaissent l'une en dessous de l'autre. C'est via le stylesheet.css que la magie va opérer pour qu'elles apparaissent côté-à-côte.

Pour cela il faut définir la taille de chaque composante. Pour ma part, j'ai accordé 65% du contenu pour l'article et 25% pour l'encart. Et il faut leur indiquer de s'aligner grâce à l'attribut inline-block.

Et voilà le résultat :