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

  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

Première solution : utiliser un "spacer"

Descriptif

On peut obliger les éléments flottants à rentrer dans le "flux" de leur élément parent. On utilisera pour cela un "spacer", c'est à dire un élément HTML (n'importe lequel) muni de la propriété CSS clear: both;.

<div id="element_parent">
	<p>Ce paragraphe est flottant à gauche</p>
	<img src="..." alt="Une image flottant à droite" />
	<div style="clear:both;"></div>
</div>

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
Ceci est une div dotté de la propriété CSS clear: both; qui permet de "faire rentrer" les éléments flottants qui le précèdent dans le flux de l'élément parent.

Testé avec :

Une solution alternative avec overflow: auto;

Descriptif

Laurent Denis proposait sur les forums d'Alsacréations la solution suivante :

« Pour obtenir le résultat attendu dans les navigateurs conformes, il faut préciser que ce conteneur doit s'étendre en hauteur en tenant compte des 3 flottants. Pour cela, ajouter la propriété overflow:auto; [au bloc conteneur]. »

Ce qui donnerait alors :

<div id="element_parent">
Ce bloc parent est doté de la propriété CSS <code>overflow: auto;</code><br /><br />
	<p>Ce paragraphe est flottant à gauche</p>
	<img src="..." alt="Une image flottant à droite" />
</div>
et 
div#element_parent {overflow: auto;}

Exemple

Ce bloc parent est doté de la propriété CSS overflow: auto;

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

Testé avec :

Test : avec un bloc parent flottant

Descriptif

Il s'agit de déclarer le bloc conteneur lui-même comme bloc flottant (à droit ou à gauche, peu importe), à l'aide de la propriété CSS float.

Cette solution a l'avantage de ne pas rajouter de contenu HTML dédié à la mise en forme (comme c'est le cas avec un spacer, par exemple). Par contre, elle peut être lourde de sens pour la mise en forme générale du document. À utiliser avec parcimonie !

Exemple

Ce bloc parent est doté de la propriété CSS float: left;

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

Testé avec :

Test : avec display: table;

[Note : solution proposée par Alan sur les forums d'Alsacréations]

Descriptif

Nous allons demander au navigateur de considérer notre bloc conteneur comme un tableau, car les tableaux s'étendend systématiquement pour englober leur contenu, qu'il soit flottant ou non. Nous utilisons pour cela la propriété CSS display: table.

Par contre, les tableaux ne fonctionnent pas selon le modèle de boîte standard que nous avons pu voir tout au début de cette page (cf. l'illustration avec les mesures en pixels). C'est à dire que si nous fixons une largeur de 500px et des retraits internes (padding) de 20px, nous obtiendrons un tableau de 500 pixels avec une largeur utile de 460 pixels. Pour corriger cela, nous allons demander à notre tableau d'occuper 540 pixels de large. On aura donc bien une largeur utile de 500 pixels.

Exemple

Ce bloc parent est doté de la propriété CSS display: table; et a une largeur déclarée de 540px

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

Témoin pour comparaison :

Ceci est un tableau témoin (avec une cellule unique) :
width: 540px; padding: 20px;

Testé avec :