Termes CSS clés employés : position, float, clear
Compatibilité navigateurs : tous.
Réaliser une disposition en trois colonnes, sans recourir à un tableau.
La propriété position permet de définir précisément le positionnement d’éléments conteneurs.
La structure HTML fondamentale se compose de trois éléments conteneurs DIV, qui renfermeront le contenu des trois colonnes.
<DIV class="centre">contenu</DIV>
<DIV class="gauche">contenu</DIV>
<DIV class="droite">contenu</DIV>
Le code CSS définit la position absolue des trois éléments :
DIV.centre { margin: 30 px 25%;}
DIV.gauche { position: absolute;
top: 10px;
left: 1%;
width: 18%;
}
DIV.droite { position: absolute;
top: 10px;
right: 1%;
width: 18%;
}
Vestibulum vitae mollis mauris. Mauris euismod varius nulla congue volutpat. Donec vestibulum porta enim, ut volutpat enim congue at. Nam dapibus fringilla porta. Sed condimentum fermentum interdum. Sed urna ante, volutpat et tempor quis, dictum adipiscing ipsum. Integer laoreet ante id justo elementum ut fringilla purus convallis.
Ut ante nunc, volutpat sagittis ultrices vel, tincidunt dignissim sapien. Vestibulum mi leo, condimentum ut porta non, gravida volutpat urna. Mauris euismod egestas nisl ut blandit. Quisque nec posuere sem. Quisque varius elementum feugiat. Pellentesque a lacinia elit. Nunc enim diam, luctus sed adipiscing sed, molestie consequat mi. Sed iaculis porta libero, nec commodo turpis tincidunt eget. Nulla at nunc ut arcu vehicula aliquet quis nec mi. Nulla sed facilisis lorem.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae urna diam, faucibus semper est. Aliquam a venenatis nulla. Nunc fringilla massa ac dui interdum vulputate. Donec a dictum nunc. Maecenas auctor egestas dui in ullamcorper. Donec ut turpis massa, et auctor velit. Cras placerat eleifend elementum.
Pellentesque porttitor, mauris non pellentesque iaculis, nisl nisi venenatis felis, sit amet commodo lacus ante a elit. Curabitur eu malesuada odio. Maecenas dapibus, leo vitae semper consectetur, nibh nibh sodales lacus, id fringilla velit velit vitae dui. Donec sem odio, mattis euismod laoreet ut, rutrum vitae tellus. Integer purus purus, dignissim vel sagittis ac, scelerisque quis ante.
Une variante peut être obtenue en n’utilisant qu’une classe d’élément de contenu DIV, et en ayant recours à des colonnes flottantes, définies en CSS comme suit :
DIV.flottant { float: left;
width: 30%;
margin: 10px 1.5%;
}
Le code HTML devient :
<DIV class=flottant>
<P>Contenu</P>
<P>Contenu</P>
</DIV>
<DIV class=flottant>
<P>Contenu</P>
<P>Contenu</P>
</DIV>
<DIV class=flottant>
<P>Contenu</P>
<P>Contenu</P>
</DIV>
La principale différence avec la version précédente est que les trois colonnes sont d’aspect strictement identique.
Avec ces deux solutions toutefois, si la fenêtre du navigateur est redimensionnée, vous conservez les trois colonnes, mais qui peuvent de ce fait devenir presque illisibles si elles sont trop étroites.
Vestibulum vitae mollis mauris. Mauris euismod varius nulla congue volutpat. Donec vestibulum porta enim, ut volutpat enim congue at. Nam dapibus fringilla porta. Sed condimentum fermentum interdum. Sed urna ante, volutpat et tempor quis, dictum adipiscing ipsum. Integer laoreet ante id justo elementum ut fringilla purus convallis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae urna diam, faucibus semper est. Aliquam a venenatis nulla. Nunc fringilla massa ac dui interdum vulputate. Donec a dictum nunc. Maecenas auctor egestas dui in ullamcorper. Donec ut turpis massa, et auctor velit.
Pellentesque porttitor, mauris non pellentesque iaculis, nisl nisi venenatis felis, sit amet commodo lacus ante a elit. Curabitur eu malesuada odio. Maecenas dapibus, leo vitae semper consectetur, nibh nibh sodales lacus, id fringilla velit velit vitae dui.
L’astuce consiste alors à recourir à un élément conteneur renfermant des éléments flottants, dont la largeur est fixée.
La structure HTML est un élément conteneur DIV renfermant le contenu, composé d’éléments P flottants et d’un dernier élément P de fermeture (indispensable pour un bon fonctionnement).
<DIV>
<P class=flottant>Contenu</P>
<P class=flottant>Contenu</P>
<P class=flottant>Contenu</P>
<P class=blanc> </P>
</DIV>
Dans le code CSS, l’élément P de classe flottant voit sa propriété float fixée à left et sa largeur fixée à 350 px. La propriété clear de l’élément de fermeture blanc est fixée à both.
DIV { width: 100%;}
P.flottant {2px dotted #ffff00;
margin: 2px;
float: left;
width: 10rem;
}
P.blanc {clear: both;}
Vestibulum vitae mollis mauris. Mauris euismod varius nulla congue volutpat. Donec vestibulum porta enim, ut volutpat enim congue at. Nam dapibus fringilla porta. Sed condimentum fermentum interdum. Sed urna ante, volutpat et tempor quis, dictum adipiscing ipsum. Integer laoreet ante id justo elementum ut fringilla purus convallis.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla vitae urna diam, faucibus semper est. Aliquam a venenatis nulla. Nunc fringilla massa ac dui interdum vulputate. Donec a dictum nunc. Maecenas auctor egestas dui in ullamcorper. Donec ut turpis massa, et auctor velit.
Pellentesque porttitor, mauris non pellentesque iaculis, nisl nisi venenatis felis, sit amet commodo lacus ante a elit. Curabitur eu malesuada odio. Maecenas dapibus, leo vitae semper consectetur, nibh nibh sodales lacus, id fringilla velit velit vitae dui.
Si la fenêtre est redimensionnée les éléments P ne forment plus qu’une ou deux colonnes, en respectant la largeur minimale fixée. Cela serait particulièrement utile si le contenu renfermait une photo ou un croquis dont les dimensions doivent être respectées.
|
|---|