En-tête, 2 colonnes, 1 pied de page (fixe ou liquide)

Au menu Design CSS, je vous propose un exemple de mise en pages classique composé d’un header, de deux colonnes et d’un footer. Pour profiter de l’avantage des CSS par rapport aux tableaux, je ferais en sort qu’en supprimant deux lignes dans la feuille de style CSS, nous passions de deux à une colonne.

Nous utiliserons la propriété float : elle permet au contenu de se placer à gauche ou à droite de celui qui le précède dans le flux. Nous attribuerons ensuite des valeurs en pourcentages à la propriété width de chaque colonne pour obtenir une largeur globale fixe ou liquide.

1 en-tête, 2 colonnes, 1 pied de page

La largeur passe facilement d’une valeur relative à une valeur fixe en modifiant la valeur width du container. Les valeurs pour chaque colonne étant en pourcentage, elles s’adapteront parfaitement à vos exigences. Notez que je vous laisse le soin de bidouiller pour afficher fièrement chez vous l’exemple ci-dessous 😉

Et puis non, finalement, puisque vous le valez bien, je vous mâche le travail.

1 en-tête, 1 colonne, 1 pied de page

Mais je parle, je parle… et j’en oublierai presque d’aller me coucher 😉 Quant à vous, prenez encore dix minutes pour afficher le code source des exemples et amusez-vous, les CSS, s’est fait pour ça !

Télécharger le fichier .html ou .php et les images