Overflow : l'attribut oublié.

Hier, Jérome Berthaud, me parlait d'une découverte qu'il avait faite lors de son escapade nocturne de la veille sur la toile. Il cherchait une solution au sempiternel problème soulevé par les éléments floatés à l'intérieur d'un autre élément de type bloc et surtout comment revenir dans le flux normal du positionnement. Voici un exemple de ce cas de figure :

<div id="outer">
 <div id="inner"> <h2>A Column</h2> </div>
  <h1>Main Content</h1>
  <p>Lorem ipsum</p>
</div>

L'idée ici, est d'avoir une colonne (d'identifiant inner) ne prenant qu'une petite partie de l'espace d'affichage, par exemple une barre de navigation. Et bien sur le reste de l'écran réservé au contenu principal du site. Il nous est bien évidemment possible de définir la taille de cette colonne, mais de par sa nature d'élément de block, le contenu principal va de facto se retrouver repoussé en dessous d'elle, à moins de choisir de la floater.

Et voilà nous y sommes, si le contenu de la colonne se met a s'allonger et finalement dépasser la longueur du contenu principal, toute la mise en forme s'écroule comme un château de cartes. Alors comment s'assurer que le bloc principal s'ajustera toujours à la longueur de notre colonne?

Ayant moi même rencontré des dizaines de fois ce problème, je m'empresse de lui répondre qu'il faut rajouter à la fin du bloc (d'identifiant outer) un nouvel élément auquel on ajoutera la propriété css clear : both, mais que malheureusement cette solution salie le code html.

Effectivement, Jérôme convient qu'il s'agit d'une solution (d'ailleurs recommandée par le W3C), mais qu'une bien meilleure solution avait été apportée par Paul O’Brien. Celle-ci consiste à ajouter la propriété css overflow:auto sur le le bloc principal, et magie le bloc principal s'adapte a la hauteur de la colonne intérieur.

#inner 
{
  width:26%;
  float:left;
}

#outer 
{
  background-color:#fff;
  width:100%; 
  overflow:auto;
}

Cerise sur le gâteau, cela fonctionne sur tout les navigateurs excepté Netscpate 4...

C'est surement une des meilleure astuce css de ces derniers mois, merci Paul O’Brien pour l'avoir découverte et merci Jérôme de me l'avoir montrée.