Colonnes de même hauteur avec CSS

Les recherches d'une technique efficace pour créer un layout avec des colonnes de la même taille n'aboutissent nulle part parce que nous n'avons pas de réel control verticale des objets sur CSS 2.1.

C'est ainsi que Ingo Chao débute son article qui présente une méthode assez efficace pour créer des colonnes de la même taille juste avec CSS. Avoir une mise en page avec des colonnes de la même taille n'est pas quelques chose de très facile à réaliser si vous ne vous servez que de CSS, et mis à part la méthode des Fausses Colonnes, je ne crois pas connaître de vrai solution à ce problème.

Après avoir effectué quelques recherches sur le sujet, les seuls alternatives que j'ai découverts étaient soit instable, ou soit difficile a implémenter, il me semblait possible de créer une méthode simple, efficace, facile à ré-utiliser, qui chargerait le contenu avant les barres de cotés, qui pourrait être soit fluide soit fixe, et qui bien entendu soit stable sur tout navigateur internet... même les pires d'entre eux.

Je dois avouer que je pensais VRAIMENT inventer quelques chose, jusqu'à ce que je trouve cet article de Paul O'Brien. Ma seul réelle contribution reste d'avoir combiné cette méthode avec une mise en page du proche du style Holy Grail, et de remplir tous les points précédement cités, a savoir: stable, flexible, etc...

Méthode expliquée en bref

Comme la méthode de Paul O'Brien, j'utilise des <div> additionnels en fin de page (honte sur moi, je sais...) pour chaque colonne, puis je les positione 'absolute', et c'est là que le secret réside. Un block standard ne peux prendre une hauteur de 100% que si le block qui l'entoure a une hauteur définie, sauf si il est positionné 'absolute'. Dans ce cas, le bloc prendra toute la hauteur de son contenant, même si celui ci n'a pas de heuteur définie. C'est ce que je propose de faire avec ces <div> additionels en fin de page, pour recréer les colonnes derrières le contenu, et donner l'illusion d'une mise en page avec des colonnes toutes de la même hauteur.

Voici quelques exemples de la mise en page finale, et aussi une présentation HTML (anglais) pas à pas.

Réalisation pas à pas

On commence avec une mise en page de type Holly Grail (ou proche).

On n'utilisera pas le contenu pour les couleurs...

Nous ajoutons à la place trois <div> vides avant le pied de page

Les <div> sont positionnés 'absolute'.

Chaque <div> a une height de 100%, et positionné en bas pour créer la hauteur de 100%.

Ramener le contenu au premier plan avec z-index:2; et voilà !

Un regard sur le code.

Voici le code de base que j'utilise. Il pourrait être un tout petit peu plus léger si on except Internet Explorer, car #main n'est utilisé que pour parrer un bug avec le pied de page.

  <div id="page">
    <div id="header">...</div>
    <div id="main">
      <div id="content">
        <div id="content-inner" class="column center">...</div>
      </div>
      <div id="left" class="column left">...</div>
      <div id="right" class="column right">...</div>
    </div> <!-- /main -->
    <div id="footer">...</div>
  </div><!-- /page -->

Voici ce que ca donne, d'une maniêre plus visuelle:

La mise en page de base

Voyons comment créer la mise en page, Avant tout, je commence toujours par un petit reset:

  *{
    margin:0;
    padding:0;
  }

Puis je commence par mettre un peu de couleur, histoire de voir ce que je fais:

  #header, #footer{background-color: #ccc;}
  #left{background-color:#d7ecff;}
  #right{background-color:#daffc6;}
  #content-inner{background-color:#fff2d7;}

Commençons par la largeur des barres de coté.

  .left {
    width: 220px;         
  }                        
  .right{                  
    width: 150px;         
  }

Puis préparer le contenu qui compensera la largeur des barres de coté une fois qu'elles seront rammenées à son niveau...

  #content-inner {
    margin-left: 220px; 
    margin-right: 150px;
  }

... ce que je fais grace a une marge de 100% sur le contenu, et un float:left; sur les barres de coté.

  #content {
    float:left;
    width:100%;
    margin-right:-100%;
  }
  .column {
    float:left;
  }

Une petite mise au point au cas ou IE fait des siennes:

  #content-inner {
     float:none;
     margin-left: 220px; 
     margin-right: 150px;
   }

La barre de droite devrais flotter à droite:

  .right{                 
    float:right;          
    width: 150px;
  }

Touche finale, le pied de page clear les colonnes:

  #footer, #header{
    clear:both;
    text-align:center;
    font-size:2em;
  }

La mise en page de base est complète, vous devriez avoir ceci. Jusqu'ici, tout va bien, et ca marche parfaitement sur la majorite des navigateurs internet sans hack ! Mas vous pouvez remarquer que les colonnes ne sont toujours pas de la même hauteur, nous allons donc remédier à ce problème.

Des colonnes de la même hauteur

Pour commencer, ajoutons les <div> en pied de page. Vous remarquerez que nous donnons les mêmes class right, left ou center pour que les <div> se comportent de la même façons que les vraies colonnes.

  <div id="page">
    <div id="header">...</div>
    <div id="main">
      <div id="content">
        <div id="content-inner" class="column center">...</div>
      </div>
      <div id="left" class="column left">...</div>
      <div id="right" class="column right">...</div>
    </div> <!-- /main -->

    <!-- These are used to create the columns background -->
    <div id="bgcenter" class="bg center"></div>
    <div id="bgleft" class="bg left"></div>
    <div id="bgright" class="bg right"></div>

    <div id="footer">...</div>
  </div><!-- /page -->

Comme ces <div> sont vident, vous ne vevrie voir aucune différence dans votre mise en page pour l'instant. Mais comme nous allons utiliser ces <div> pour recréer les colonnes, nous pouvons changer les couleurs établient précédemment pour être appliquées sur ces nouveaux <div>.

  #bgleft{background-color:#d7ecff;}
  #bgright{background-color:#daffc6;}
  #bgcenter{background-color:#fff2d7;}

Nous pouvons maintenant commencer a créer les colonnes. Tout d'abords, commençons par assigner #page comme l'origine des positionnements:

  #page{
    position:relative;
  }

Maintenant nous pouvons positionner les <div> et leurs donner une hauteur de 100% comme exlpiqué precedemment.

  .bg{
    position:absolute;
    bottom:0;
    height:100%;
  }

Plus de spécificité pour chaque colonne:

  #bgleft{
    left:0;
  }
  #bgright{
    right:0;
  }
  #bgcenter{
    right:0;
    width:100%;
  }

Vous remarquerez que nous pouvons assigner le contenu avec une largeur de 100%, comme celui ci est chargé en premier, il apparaîtra derrière les autres colonnes. Maintenant le problème est que les colonnes cachent le contenu. Pour changer ça, il suffit de changer le z-index du vrai contenu

  #content, #left, #right, #header, #footer{
    position:relative;
    z-index:2;
  }

Et voilà! Toutes les colonnes sont de la même hauteur, mais bien sur, comme toujours, internet explorer 6 et 7 sont capricieux. Nous allons donc devoir ajouter un petit hack pour faire en sorte que ceux la tiennent le rangs:

  <!--[if lt IE 8]>
    <style type="text/css">
      /* Only Hack for IE */
      #main, #page{ height:1%; }
      .bg{ height:1000em; }    
    </style>
  <![endif]-->

Voilà le résultat de tout notre travail.

J'ai préparé quelques exemples de cette méthode, en utlisant plusieurs situation et mise en page différentes. Toutes ont été testées sur la plupart des navigateurs internet. Le seul inconvénient avec cette technique est que la tête et le pied de page doivent cacher les colonnes.

J'ai aussi travaillé surune intégration de cette méthode pour une mise en page qui remplissent la fenêtre en permanence, même si le contenu est trop court pour pousser le pied de page en bas de fenêtre. Le résultat est assez stable mais pause quelques probleme avec Opera... malgré ça, je pense que cette mise en page a peu de defaults, et offre presque tous ce que l'on pourrait désirer d'une solution CSS.

Références

A List Apart: Faux Columns

http://alistapart.com/articles/fauxcolumns/

A List Apart: In Search of the Holy Grail

http://www.alistapart.com/articles/holygrail

A List Apart: Creating Liquid Layouts with Negative Margins

http://alistapart.com/articles/negativemargins

Ingo Chao: Companion column method

http://www.satzansatz.de/cssd/companions.html

CSS layout: 100% height with header and footer

http://www.xs4all.nl/~peterned/examples/csslayout1.html

How to Make Equal Columns in CSS

http://www.search-this.com/2007/02/26/how-to-make-equal-columns-in-css/

Position is Everything: In search of the One True Layout

http://www.positioniseverything.net/articles/onetruelayout/

• message suivant
• message précédent