Légende
beige : élément parent (conteneur), qui vient englober les éléments flottants grâce à la propriété overflow: auto; [cf. ce tutoriel sur les éléments en positionnement flottant]
bleu ciel : paragraphe simple (pas de style spécifique appliqué)
orange : div simple avec hauteur fixée à 100 pixels
rouge : élément flottant à gauche (propriété float: left;)
vert : élément flottant à droite (propriété float: right;)
Note 1 : tous les paragraphes et tous les blocs dans les exemples suivant ont les mêmes marges par défaut, fixées de la manière suivante : margin: 1em 0;
Note 2 : on remarquera que l'écart entre deux blocs ou paragraphes est normalement de 1em. Par contre, lorsqu'un des deux éléments est flottant, les marges des deux éléments ne fusionnent plus, et on obtient un écart de 2em.
Sans élément flottant
Position dans le code : paragraphe simple suivi d'un bloc simple
Ceci est un paragraphe simple
Paragraphe témoin
Deuxième paragraphe témoin
Position dans le code : bloc simple, suivi d'un paragraphe simple
Ceci est un paragraphe simple
Paragraphe témoin
Deuxième paragraphe témoin
Avec un paragraphe flottant à gauche
Position dans le code : Paragraphe flottant à gauche, suivi d'un bloc simple
Paragraphe flottant à gauche
Paragraphe témoin
Deuxième paragraphe témoin
Position dans le code : Bloc simple, suivi d'un paragraphe flottant à gauche
Paragraphe flottant à gauche
Paragraphe témoin
Deuxième paragraphe témoin
Avec un paragraphe flottant à droite
Position dans le code : Paragraphe flottant à droite, suivi d'un bloc simple
Paragraphe flottant à droite
Paragraphe témoin
Deuxième paragraphe témoin
Position dans le code : Bloc simple, suivi d'un paragraphe flottant à droite
Paragraphe flottant à droite
Paragraphe témoin
Deuxième paragraphe témoin
Avec un bloc flottant à gauche
Position dans le code : Paragraphe simple, suivi d'un bloc flottant à gauche
Ceci est un paragraphe simple
Paragraphe témoin
Deuxième paragraphe témoin
Position dans le code : Bloc flottant à gauche, suivi d'un paragraphe simple
Ceci est un paragraphe simple
Paragraphe témoin
Deuxième paragraphe témoin
Avec un bloc flottant à droite
Position dans le code : Paragraphe simple, suivi d'un bloc flottant à droite
Ceci est un paragraphe simple
Paragraphe témoin
Deuxième paragraphe témoin
Position dans le code : Bloc flottant à droite, suivi d'un paragraphe simple
Ceci est un paragraphe simple
Paragraphe témoin
Deuxième paragraphe témoin
Avec un paragraphe flottant à gauche ET un bloc flottant à droite
Position dans le code : Paragraphe flottant à gauche, suivi d'un bloc flottant à droite
Paragraphe flottant à gauche
Paragraphe témoin
Deuxième paragraphe témoin
Position dans le code : Bloc flottant à droite, suivi d'un paragraphe flottant à gauche
Paragraphe flottant à gauche
Paragraphe témoin
Deuxième paragraphe témoin
Avec un paragraphe flottant à droite ET un bloc flottant à gauche
Position dans le code : Paragraphe flottant à droite, suivi d'un bloc flottant à gauche
Paragraphe flottant à droite
Paragraphe témoin
Deuxième paragraphe témoin
Position dans le code : Bloc flottant à gauche, suivi d'un paragraphe flottant à droite
Paragraphe flottant à droite
Paragraphe témoin
Deuxième paragraphe témoin
Avec un paragraphe flottant à gauche ET un bloc flottant à gauche
Position dans le code : Paragraphe flottant à gauche, suivi d'un bloc flottant à gauche
Paragraphe flottant à gauche
Paragraphe témoin
Deuxième paragraphe témoin
Position dans le code : Bloc flottant à gauche, suivi d'un paragraphe flottant à gauche
Paragraphe flottant à gauche
Paragraphe témoin
Deuxième paragraphe témoin
Avec un paragraphe flottant à droite ET un bloc flottant à droite
Position dans le code : Paragraphe flottant à droite, suivi d'un bloc flottant à droite
Paragraphe flottant à droite
Paragraphe témoin
Deuxième paragraphe témoin
Position dans le code : Bloc flottant à droite, suivi d'un paragraphe flottant à droite
Paragraphe flottant à droite
Paragraphe témoin
Deuxième paragraphe témoin
Annexe : et avec un contenu plus important ?
Si l'on ajoute plus de contenu, par exemple du texte, dans un paragraphe ou un bloc, il s'étendra en largeur autant que possible. Du coup, plus de place disponible pour placer un autre élément en positionnement flottant :
Paragraphe flottant à gauche
Paragraphe témoin
Deuxième paragraphe témoin
Utiliser une marge ne suffira malheureusement pas pour créer l'espace nécessaire. En effet, l'espace blanc ainsi créé est un espace "réservé", qui reste vide. Un bloc ne pourra donc pas venir s'y loger. Exemple :
margin-left: 50%;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Paragraphe flottant à gauche
Paragraphe témoin
Deuxième paragraphe témoin
Il faudra donc donner une largeur fixe au bloc :
width: 50%;Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Paragraphe flottant à gauche
Paragraphe témoin
Deuxième paragraphe témoin
Bien entendu, avec plusieurs blocs ayant un contenu important, chaque bloc devra avoir une largeur fixe. Par exemple :
width: 40%;Premier dans le flux
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
width: 30%;Deuxième dans le flux
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
width: 30%;Troisième dans le flux
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.
Paragraphe témoin
Deuxième paragraphe témoin