Design XHTML/CSS complet avec 2 colonnes de même hauteur

Niveau : Confirmé

Nous allons réaliser une mise en page comportant deux colonnes de même hauteur. Pour corser la difficulté par rapport au tutoriel précédent, en plus de l'ajout d'une colonne, nous allons nous imposer une structure un peu plus complexe : La page occupera toujours au minimum 100% de la hauteur de la fenêtre, quel que soit le contenu ; Le pied de page se trouvera toujours tout en bas de la page, quel que soit le contenu ; Le menu sera vertical et plus horizontal (ce n'est pas plus compliqué, mais c'est un peu différent).

Tutoriel par Thomas D. (Développeur web, Verviers (Belgique))
Mis à jour le 01 Juillet 2009 à 11h22. 17338 lectures.
Tags : css, design, fluide, hauteur

Puisqu'une image vaut mieux qu'un long discours, voici 2 captures du résultat recherché :

Résultat avec un contenu court Résultat avec un contenu long

Débutez le tutoriel

Comment profiter au maximum du tutoriel ?

Refaites-le ! Reconstruisez les pages au fur et à mesure, avec les images du tutoriels ou les vôtres. C'est la meilleure façon de comprendre la succession des différentes étapes, et de visualiser les difficultés rencontrées (et apprendre à les reconnaître par la suite).

Suivez le fil du tutoriel en vérifiant le résultat dans un navigateur respectueux des standards (Firefox, Opera, IE7 ?, ...) jusqu'à la cinquième étape. Ensuite, ouvrez la page dans IE6 et attaquez la dernière étape !

La compréhension de certaines parties du tutoriel nécessite une base minimale en CSS, et en particulier une bonne compréhension des méthodes de positionnement en CSS. Si vous êtes perdu, essayez éventuellement de réaliser l'autre design d'abord. En cas de panne sèche ou d'échec critique, rendez-vous sur le forum ;)

Attention ! en plus des fautes d'orthographe et de frappe, deux jeux de mots foireux se sont glissé dans le tutoriel ! N'ayez pas peur, ce n'est pas contagieux.
Quoique ...