Éléments flottants qui dépassent de l'élément parent (1)

Màj: 2006

  1. Exposé du problème
  2. Exemples avec un élément parent de largeur fixe, et exposé des solutions disponibles
  3. Exemples avec un élément parent sans largeur fixe (non doté du layout)
  4. Pour IE Win : divers moyens de doter l'élément parent du layout

Descriptif du problème observé

Les éléments flottants (à l'aide de la propriété CSS float) ne sont plus pris en compte dans le calcul de la hauteur de leur élément parent (représenté ici par une bordure rouge). Du coup, l'élément parent ne s'agrandit plus pour contenir ces éléments. Il s'agit là d'un comportement standard, mais parfois surprenant !

Exemple

Ceci est un paragraphe flottant à gauche. L'image qui suit (en dehors de ce paragraphe) sera en positionnement flottant à droite.

Image qui sera en positionnement flottant à droite

Note : si vous avez visualisé cette page avec Internet Explorer Windows, vous aurez remarqué que l'exemple ci-dessus n'y présente pas de problème : l'élément parent englobe bien les éléments enfants, flottants ou pas (d'où l'intérêt de l'image qui accompagne cet exemple).
Pour les utilisateurs d'Internet Explorer pour Windows, voici donc un aperçu du rendu dans la plupart des autres navigateurs :

rendu de l'exemple précédent dans les navigateurs autres que IE, avec anotations

Au passage, on peut en profiter pour rappeler la structure de notre boîte. Notre bloc conteneur (bloc parent) fait ici 500px de large, et il est doté d'espaces intérieurs (padding) de 20px. Ces espaces intérieurs se rajoutent à la largeur du bloc, de sorte que nous avons un bloc d'une largeur totale de 540 pixels.

Le cas Internet Explorer

Pourquoi donc Internet Explorer pour Windows n'applique-t-il pas le même comportement ?

En réalité, ce test est biaisé : en temps normal Internet Explorer pour Windows applique bien le comportement standard (les éléments flottants "flottent" par dessus les autres blocs, et ne repoussent pas les limites de l'élément parent), mais dans l'exemple ci-dessus on a donné une largeur fixe (500px) à l'élément parent. Une dimmension fixe (en largeur ou en hauteur) est un des paramètres qui font qu'Internet Explorer va conférer au bloc en question un statut particulier, le layout. Et un des effets du layout est que les blocs qui ont ce statut viennent englober tous leurs éléments enfants, y compris les flottants.

Maintenant, si on supprime cette largeur fixe, voici ce que l'on obtient :

Ceci est un paragraphe flottant à gauche. L'image qui suit (en dehors de ce paragraphe) sera en positionnement flottant à droite.

Image qui sera en positionnement flottant à droite

Avec la plupart des navigateurs web, on n'observera pas un grand changement, si ce n'est que le bloc parent prend maintenant toute la largeur disponible. Par contre, pour Internet Explorer Win, le bloc parent perd le layout, et on observe le même dépassement des flottants qu'avec les autres navigateurs.

Le layout est un concept relativement complexe. Vous trouverez de plus amples informations et exemples sur les conséquences du layout sur le site de Laurent Denis.

La page 4 de cette série d'exemple traite également (très rapidement) de ce problème de layout.