Créez une mise en page à trois colonnes avec l'échange CSS floats_Experience

La mise en page à trois colonnes est actuellement la mise en page de page Web la plus courante. Le contenu de la page principale est placé dans la colonne du milieu et les deux colonnes sur le côté sont placées avec des liens de navigation et d'autres contenus. La mise en page de base place généralement trois colonnes sous le titre, et les trois colonnes occupent toute la largeur de la page. Enfin, un pied de page est placé en bas de la page, et le pied de page occupe également toute la largeur de la page.

La plupart des concepteurs de sites Web sont familiers avec les techniques de conception Web traditionnelles qui peuvent être utilisées pour générer des mises en page avec des tableaux, créer des mises en page à largeur fixe ou « liquides » (qui évoluent et se rétrécissent automatiquement en fonction de la largeur du navigateur de l'utilisateur. fenêtre) page Web.

Maintenant que nous nous éloignons tous des techniques de mise en page basées sur des tableaux, de nombreux concepteurs Web se tournent vers le nouveau paradigme du balisage XHTML et du formatage CSS pour trouver des moyens de créer des mises en page à trois colonnes. Il n'est pas difficile d'obtenir une mise en page à largeur fixe à partir de CSS en utilisant un positionnement absolu ; mais obtenir une mise en page liquide est un peu plus difficile. Par conséquent, cet article présente une méthode pour obtenir une disposition liquide à trois colonnes en utilisant les propriétés CSS float et clear.

Méthode de base
La mise en page de base contient cinq div, à savoir le titre, le pied de page et trois colonnes. L'en-tête et le pied de page occupent toute la largeur de la page. Les div de la colonne de gauche et de droite ont tous deux une largeur fixe et l'attribut float est utilisé pour les compresser sur les côtés gauche et droit de la fenêtre du navigateur. La colonne centrale occupe en fait toute la largeur de la page et le contenu de la colonne centrale « circule » entre les colonnes de gauche et de droite. Étant donné que la largeur de la colonne du milieu div n'est pas fixe, elle peut s'étendre et se contracter si nécessaire en fonction des modifications apportées à la fenêtre du navigateur. Les propriétés de remplissage sur les côtés gauche et droit de la colonne centrale div garantissent que le contenu est organisé dans une colonne soignée, même lorsqu'il s'étend jusqu'au bas de la barre latérale (colonne de gauche ou de droite).

Un exemple de mise en page à trois colonnes
Veuillez jeter un œil à un exemple de mise en page à trois colonnes en utilisant les techniques présentées dans cet article. Cet exemple utilise des couleurs vives pour distinguer les différents div de la mise en page.

Ce qui suit est le code XHTML :

En-tête

Texte côté bâbord...

Texte côté tribord...

Texte de la colonne du milieu.. .

Texte du pied de page...

Ce qui suit est le code CSS :

body {
margin: 0px;
padding: 0px;
div#header {
clear:
height: 50px; aqua ;
padding : 1px ;
}
div#left {
float : left ;
width :
background-color : rouge ; div#right {
float: right;
width: 150px;
background-color: vert
}
div#middle {
padding: 0px 160px 5px 160px; > margin : 0 px ;
couleur de fond : argent
}
div#footer {
clear : les deux ;
couleur de fond : jaune ; 🎜>