Cet article explique comment créer une mise en page à 3 colonnes en CSS. Les instructions s'appliquent à CSS3 et plus ancien.

Dessinez votre mise en page

Vous pouvez dessiner votre mise en page sur papier ou dans un programme graphique. Si vous avez déjà en tête une conception filaire ou même plus étendue, simplifiez-la aux cases de base qui composent le site. Cette conception qui accompagne cet article comporte trois colonnes dans la zone de contenu principale, ainsi qu'un en-tête et un pied de page. Si vous regardez attentivement, vous pouvez voir que les trois colonnes n'ont pas la même largeur.

Après avoir dessiné votre mise en page, vous pouvez commencer à penser aux dimensions. Cet exemple de conception aura les dimensions de base suivantes:

• Pas plus de 900 pixels de large
• 20 px gouttière à gauche
• 10 px entre les colonnes et les lignes
• Colonnes de 250px, 300px et 300px de large
• La rangée du haut mesure 150px de haut
• La rangée du bas mesure 100px de haut

Écrire du HTML/CSS de base et créer un élément de conteneur

Étant donné que cette page sera une HTML document, commencez par un conteneur HTML vide.

Ajoutez les styles CSS de base à mettre à zéro les marges, les bordures et les remplissages de la page. Alors qu'il y a d'autres styles CSS standards pour les nouveaux documents, ces styles sont le minimum dont vous avez besoin pour obtenir une mise en page propre. Ajoutez-les à l'en-tête de votre document.

Pour commencer à créer la mise en page, placez un élément conteneur. Il arrive parfois que vous puissiez vous débarrasser du conteneur plus tard, mais pour la plupart des mises en page à largeur fixe, le fait d'avoir l'élément conteneur facilite la gestion sur différents sites Web. navigateurs.

Styliser le conteneur

Le conteneur définit la largeur du contenu de la page Web, ainsi que les marges à l'extérieur et le rembourrage à l'intérieur. Pour ce document, le conteneur fait 870px de large avec une gouttière de 20 pixels sur la gauche. La gouttière est configurée avec un style de marge, mais le rembourrage du conteneur est mis à zéro pour empêcher que des éléments soient aussi larges que le conteneur.

Si vous enregistrez votre document maintenant, il sera difficile de voir le conteneur car il ne contient rien. Si vous ajoutez du texte d'espace réservé, vous pourrez voir l'élément conteneur plus clairement.

Utiliser une balise de titre pour l'en-tête

La façon dont vous décidez de styliser la ligne d'en-tête dépend beaucoup de ce qu'elle contient. Si la ligne d'en-tête n'a qu'un logo et un titre, utilisez une balise de titre (

) est plus logique que d'utiliser un

. Vous pouvez styliser le titre de la même manière que vous stylisez un div, et vous évitez les balises superflues.

Le code HTML de la ligne d'en-tête se place en haut du conteneur et ressemble à ceci:

Ensuite, pour définir les styles dessus, une bordure rouge a été ajoutée en bas afin que vous puissiez voir où elle se termine, les marges et le rembourrage ont été mis à zéro, la largeur définie sur 100% et la hauteur sur 150px.

N'oubliez pas de faire flotter cet élément avec le float: left; propriété. La clé pour écrire des mises en page CSS est de tout faire flotter, même les choses qui ont la même largeur que le conteneur. De cette façon, vous savez toujours où se trouveront les éléments sur la page.

UNE Sélecteur de descendants CSS appliqué des styles uniquement aux éléments H1 qui se trouvent à l'intérieur de l'élément #container.

Pour obtenir trois colonnes, commencez par créer deux colonnes

Lorsque vous créez une mise en page à trois colonnes avec CSS, vous devez diviser votre mise en page en groupes de deux. Donc pour cette disposition à trois colonnes, les colonnes du milieu et de droite et regroupées et placées à côté de la colonne de gauche dans une disposition à deux colonnes où la colonne de gauche a une largeur de 250px et la colonne de droite une largeur de 610px (300 chacune pour les deux colonnes, plus 10px pour la gouttière entre eux).

La colonne de gauche est flottante vers la gauche, tandis que l'autre est flottante vers la droite. Étant donné que la largeur totale des deux colonnes est de 860 pixels, il y a une gouttière de 10 pixels entre elles.

Ajouter deux colonnes à l'intérieur de la deuxième colonne large

Pour créer les trois colonnes, ajoutez deux div à l'intérieur de la deuxième colonne plus large, tout comme vous avez ajouté 2 div à l'intérieur de la colonne conteneur à la dernière étape.

Étant donné que ces deux boîtes de 300 pixels de large se trouvent à l'intérieur d'une boîte de 610 pixels de large, il y aura à nouveau une gouttière de 10 pixels entre elles.

Ajouter dans le pied de page

Maintenant que le reste de la page est stylisé, vous pouvez ajouter le pied de page. Utilisez une dernière div avec un identifiant de "pied de page" et ajoutez du contenu afin que vous puissiez le voir. Vous pouvez également ajouter une bordure en haut pour que vous sachiez où cela commence.

Ajoutez vos styles et contenus personnels

Maintenant que vous avez terminé la mise en page, vous pouvez commencer à ajouter vos propres styles et contenus personnels. N'oubliez pas que les bordures de l'en-tête et du pied de page ont été ajoutées pour afficher les sections de mise en page, pas spécifiquement pour la conception.