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

  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

layout avec une dimmension fixe

Avec une largeur fixe

Ce bloc parent est doté de la propriété CSS width: 80%;

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 une hauteur fixe

Ce bloc parent est doté de la propriété CSS height: 1%;

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

layout avec la propriété (propriétaire Microsoft, non standard) zoom

On va utiliser une propriété non standard d'Internet Explorer (Win), nommée zoom.

Ce bloc parent est doté de la propriété CSS zoom: 1;

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

Autres propriétés

Pour plus d'explications sur le layout et d'autres propriétés CSS permettant de l'obtenir, voir Avoir le layout - Le concept de hasLayout dans IE/Win (collectif, traduction française).