Médiaforma

Un design à trois colonnes

Print Friendly

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

Dans cette section, nous allons définir un design sur trois colonnes. La première colonnes sera ancrée à gauche et aura une largeur fixe. La troisième colonne sera ancrée à droite et aura une largeur fixe. Quant à la deuxième colonne, elle occupera tout l’espace laissé libre par les deux autres colonnes.

Le code HTML est rudimentaire : il contient trois balises <div> consécutives, remplies avec un peu de texte :

Le code CSS est bien plus intéressant.

Les lignes 1 à 7 définissent les caractéristiques de la première balise <div>. La colonne est flottante, ancrée à gauche, large de 200 pixels, a une couleur spécifique et une marge interne de 10 pixels.

Les lignes 9 à 15 définissent les caractéristiques de la troisième balise <div>. La colonne est flottante, ancrée à droite, large de 250 pixels, a une couleur spécifique et une marge interne de 10 pixels.

Enfin, les lignes 17 à 23 définissent les caractéristiques de la deuxième balise <div>, qui se trouve entre les deux colonnes flottantes gauche et droite. Cette balise est décalée de 220 pixels à gauche, c’est-à-dire de la largeur de la balise flottante gauche augmentée de ses marges internes. Elle est également décalée de 270 pixels à droite, c’est-à-dire de la largeur de la balise flottante droite augmentée de ses marges internes. Tout comme les deux autres <div>, cette balise a une couleur spécifique et une marge interne de 10 pixels.

Affichons le résultat du code HTML dans un navigateur. Comme vous pouvez le voir la première et la troisième colonne sont ancrées sur les bords gauche et droit de la fenêtre. Quant à la deuxième colonne, elle occupe toute la largeur disponible lorsque la fenêtre est redimensionnée.

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

No comments yet.

Leave a Reply