css tableau

Le principe est donc très très simple :

Le div id="article" est émulé en tableau grâce à display:table.
Les div #contenu1 et #contenu2 deviennent des cellules grâce à display:table-cell
<div id="art">
<div id="mod1">cellule!</div>
</div>
<style><!--
#art {width:80vw; height:auto; display:table; margin:0vh auto;}
#mod1 { width:600px; height:300px; padding:5px; border:0.1vw solid black; box-sizing:border-box; display:table-cell; background-color:#fff;}
--></style>

Le contenu de ces cellules s'aligne par défaut en haut, mais on peut changer ça en déclarant un vertical-align:middle pour centrer le contenu verticalement, ou un vertical-align:bottom pour l'aligner en bas.

L'avantage notable de cette technique c'est que les 2 colonnes sont toujours de même hauteur, quels que soient leurs contenus respectifs.

Chose qui est impossible, ou du moins difficile, à obtenir avec des positionnements "classiques".

Troisième module

Pour placer un troisième en première ligne, il faut l'écrire en première position des modules et il faut également écrire le quatrième module, même vide car sinon, le 3ème module occupe toute la largeur !

Quatrième module

Pour que ces deux derniers modules se placent au dessus des précédents, il faut les placer dans un cadre (div) et c'est donc à faire pour chaque couple de modules ajouté.

Premier module

L'abandon par de plus en plus d'intégrateurs de l'utilisation de tableaux pour l'élaboration de mises en page a indiscutablement apporté de nombreux avantages, mais également son lot d'inconvénients. Parmi ceux-ci, un majeur: le centrage vertical simple et automatisé du contenu d'un objet.

Les habitudes de plusieurs années de développement par tables ont laissé des traces, des habitudes ancrées de manière indélébile qui ne sont pas systématiquement préjudiciables; c'est entre autres le cas du recours à la propriété vertical-align.

Fort de ce constat, et vu la puissance qu'offre les cellules de tableaux en terme d'alignement vertical de leurs contenus, la spécification CSS admet logiquement l'attribution de ce comportement à tout élément qui en nécessiterait.

Second module

Le second module se place automatiquement à côté du premier, avec ou sans espace.

Le cadre lien se place sous la dernière ligne de texte ce qui oblige à avoir le même nombre de lignes si on souhaite que ces cadres soient alignés.

La hauteur des modules s'adapte automatiquement et si les contenus sont similaires, les hauteurs sont les mêmes; le plus haut module sert de référence.

Le lien vers la page de l'article est affichée dans une nouvelle page