Médiaforma

Un design à deux colonnes

Print Friendly

Cliquez ici pour accéder au pack eBook+vidéos HTML5, CSS3, JavaScript

Dans cette rubrique, je vais vous montrer comment faire une mise en page sur deux colonnes. La première de largeur fixe et la deuxième qui occupe le reste de l’espace horizontal disponible.

Vous vous en doutez certainement : chacune des colonnes sera représentée par une balise <div>. Le document HTML est des plus classiques. Il contient deux balises <div> d’identifiant col1 et col2 et un texte quelconque est placé dans chacune des balises.

Le code CSS est bien plus intéressant.

Les lignes 1 à 7 définissent les caractéristiques de la première balise <div>. Cette dernière sera flottante, sur le côté gauche de la fenêtre. Elle aura une largeur de 200 pixels, une couleur spécifique et une marge intérieure de 10 pixels.

Les lignes 9 à 14 précisent les caractéristiques de la deuxième balise <div>. En définissant une marge à gauche de 220 pixels, cette balise s’insère à droite de la première balise <div>. Vous vous demandez peut-être pourquoi avoir défini une marge de 220 pixels et non de 200 pixels, puisque la première balise <div> est large de 200 pixels. Ajoutez à ces 200 pixels la marge gauche de 10 pixels et la marge droite de 10 pixels de la première balise <div> et vous obtenez une marge de 220 pixels. La ligne 12 définit la couleur d’arrière-plan de la deuxième balise <div> et la ligne 13 sa marge intérieure.

Il ne reste plus qu’à afficher le document HTML dans un navigateur. Lorsque l’on redimensionne la fenêtre du navigateur, la deuxième balise <div> s’étire pour occuper tout l’espace horizontal qui lui est donné.

Vous avez aimé cet article ? Partagez-le avec vos réseaux...
 
Comments

No comments yet.

Leave a Reply