Pour ce faire, on utilise les propriétés de positionnement des styles CSS.
L'avantage de cette méthode sur celle du tableau est qu'on peut séparer totalement le fond et la forme (en déclarant la position du calque dans une feuille de style séparée) et donc gérer plus facilement l'accessibilité du site.
L'inconvénient est que les navigateurs interprètent différemment les instructions...
en plusieurs parties à l'aide des balises <div> munies chacune d'un identifiant unique.
<div id="navigation">
-----------
</div>
<div id="principal">
-----------
</div>
<div id="voiraussi">
----------
</div>
Par défaut les divisions <div> se succèdent sur la page, mais il est possible de les contraindre à s'afficher différemment. Dans la feuille de style, on pourra définir les propriétés de chacun de ces éléments en utilisant leur identifiant précédé de # :
#titre{} #navigation{} #principal {} #voiraussi {}
et on indiquera à l'intérieur des accolades les caractéristiques (dimension, positionnement sur la page, etc.) de chacun d'entre eux [cf syntaxe].
Exemples :
mise en page 3 colonnes - mise
en page 2 colonnes et "post-it"
Creative Commons License. BY:NC:SA: -Attribution : ce site peut être reproduit et distribué à condition que l'auteur initial, eric pichon, soit cité.- Non commercial : aucune adaptation, reproduction ou utilisation de ce site ne peut être faite à des fins commerciales, sans accord de l'offrant ('licensor') - Partage à l'identique : des adaptations de ce site ne peuvent être diffusées que sous une autorisation identique.