Exercice CSS : une mise en page en deux colonnes sans conteneurs neutres

Deuxième exercice de la série.

Les habitués de la mise en page avec le couple (X)HTML/CSS, pour des mises en page complexes, font souvent appel à des conteneurs « neutres », on remarque même souvent un abus de ces conteneurs.

Leur utilité principale est de délimiter les grandes zones d’information d’une page et surtout de faciliter le regroupement d’un ensemble d’autres conteneurs à un même endroit.

Il est possible, bien sur, de limiter l’usage de ces conteneurs « neutres » surtout pour des mises en page simples, mais il faut bien l’avouer, ils nous facilitent quand même bien le travail.

Donc, aujourd’hui, nous allons essayer de construire une mise en page en 2 colonnes, SANS conteneur neutre. Pas si simple qu’il y parait.

Construire une mise en page en deux colonnes sans conteneurs neutres

  • Objectif : à la fin de cet exercice, vous serez, normalement, capables, de construire une mise en page en deux colonnes, sans user de conteneurs neutres.
  • Niveau de difficulté : pas si simple
  • Difficulté détectée : Différents problèmes de rendus en fonction des navigateurs.
  • Pré requis techniques : connaitre les balises html, bases de CSS, une bonne connaissance des différents types de positionnement est un plus (des sources sont fournies en bas de page).
  • Matériel nécessaire : un simple éditeur de texte suffit.
  • Informations complémentaires : Voir l’image ci-dessous, il faut de plus que le design soit « fluide » (qu’il s’adapte à la résolution de l’écran) et que la construction résiste à au moins trois agrandissements de tailles de polices sous Firefox et à la taille maximal des polices sous IE. Votre code doit bien sur être conforme aux spécifications W3C tant pour le HTML que pour le CSS. Toutes les balises (X)HTML sont autorisées sauf balises « neutres » (comme ça par exemple, pas de <div></div> hein…).

L’exemple en image :

Mise en page en deux colonnes sans conteneur neutre

Pour information :

Je n’ai pas actuellement de version 100% compatible avec tous les navigateurs, c’est pour ça que je ne précise pas dans l’intitulé que la mise en page doit être compatible sur tous les navigateurs. Je vais travailler dessus en même temps que vous et tenter de faire évoluer mon code.

Précisez, si possible, quelles difficultés et quelles limitations vous rencontrez, pour que l’on essaie d’y remédier.

Si vous avez besoin d’informations complémentaire, n’hésitez pas à en demander.

Précisez dans les commentaires si vous avez fini l’exercice en mettant un lien vers la page, ou si vous n’avez pas d’hébergement, envoyez moi vos fichiers je les hébergerai.

Les sources :

Bon exercice.

Merci à vous de participer.

PS : ça c’est un exercice pour clb56 ;).

Cordialement,
Aymeric Jacquet