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>

Menu

Les différences de largeur dues au modèle de boîte incorrect d'Internet Explorer Windows ne sont pas gérées dans cet exemple.

Menu

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