OpenWeb - Exemple d'utilisation de la position absolue pour une mise en page à trois colonnes

Cette page est un exemple de la technique de mise en page exposée dans Initiation au Positionnement CSS : 3.position absolue et fixe.

Dans les navigateurs conformes au standard CSS2, le contenu central est flanqué de deux colonnes latérales.

code CSS :

.centre {
margin: 1em 25%;
}
.gauche {
position: absolute;
top: 1em;
left: 1%;
width: 18%;
}
.droite {
position: absolute;
top: 1em;
right: 1%;
width: 18%;
}

code HTML :

<body>
<div class="centre">
...
</div>
<div class="gauche">
...
</div>
<div class="droite">
...
</div>
</body>

Les différences de largeur due au modèle de boîte incorrecte d'Internet Explorer Windows ne sont pas gérée dans cet exemple. A ce propos, voir Gérer les modèles de boîtes CSS standard et Microsoft.

Ut wisi enim ad minim veniam, quis nostrud exerci tation nisl ut aliquip ex ea commodo consequat.

Accueil OpenWeb | Plan du site | Conditions de réutilisation

Cette page est valide Xhtml et Css

Ce site s'affiche mieux dans un navigateur conforme aux standards, voici pourquoi