Cours de bureautique

CREATION DE SITE

Création de site - POSITIONNEMENT FLOTTANT

Le positionnement flottant

On positionne un élément en flottant avec une déclaration float:left (ou right);
Il est alors retiré du flux normal pour prendre place à gauche (ou à droite) du bloc qui le contient. L'élément qui le suit s'écoulera alors dans l'espace ainsi laissé libre, en épousant sa forme.
Voici tout d'abord deux paragraphes en flux courant ; le second a été autorisé à occuper toute la largeur disponible.



En appliquant la propriété float:right au premier paragraphe, celui-ci se placera à droite, et le second occupera alors l'espace restant, en le contournant.



Le positionnement flottant permet de placer des blocs cote à cote.

Voici le résultat de notre exemple après avoir rendu les deux paragraphes flottants (à gauche) et réduit la largeur du second paragraphe à 150px.




Dans l'exemple précédent, le bloc div avait reçu une hauteur spécifique de 150px.

Si la hauteur spécifiée pour le bloc div est inférieure à la hauteur du second paragraphe, dans certains navigateurs, l'affichage renvoie le bloc div en hauteur comme suit :



On recourra alors à la propriété clear, qui interdit le voisinage d'un flottant.



En plaçant une ligne horizontale sous les flottants, et en supprimant la hauteur explicite du bloc div, le conteneur s'est bien étiré jusqu'à inclure la ligne horizontale. On peut ensuite la cacher à l'aide de la déclaration visibility : hidden. Grâce à cet élément de séparation, le bloc div englobe désormais les deux paragraphes flottants.

copyright 2015 Eléonore Vieytes,
Tous droits de reproduction réservés