Le positionnement des flottants

Le fonctionnement des flottants

Ceci est une boîte beige, il s'agit d'un P.

Ceci est une boîte verte, il s'agit d'un P qui possède un contenu plus long.

Ceci est une boîte bleue qui a perdu sa couleur, il s'agit d'un P.

Les images avec les flottants

chat

Ceci est une boîte bleue qui a perdu sa couleur, il s'agit d'un P.

Ceci est une boîte verte, il s'agit d'un P qui possède un contenu plus long.

Integer vulputate leo in nisi fermentum, ac aliquam leo aliquam. Suspendisse bibendum pulvinar augue, quis tincidunt mi lacinia faucibus. Proin at diam risus. In sollicitudin odio vitae tempus ultricies. Vivamus eleifend rutrum iaculis. Ut vulputate hendrerit nibh ac euismod. Donec in justo in purus ultrices elementum sit amet ut libero. Nam ut sapien quis sem feugiat molestie.

Integer vulputate leo in nisi fermentum, ac aliquam leo aliquam. Suspendisse bibendum pulvinar augue, quis tincidunt mi lacinia faucibus. Proin at diam risus. In sollicitudin odio vitae tempus ultricies. Vivamus eleifend rutrum iaculis. Ut vulputate hendrerit nibh ac euismod. Donec in justo in purus ultrices elementum sit amet ut libero. Nam ut sapien quis sem feugiat molestie.

Integer vulputate leo in nisi fermentum, ac aliquam leo aliquam. Suspendisse bibendum pulvinar augue, quis tincidunt mi lacinia faucibus. Proin at diam risus. In sollicitudin odio vitae tempus ultricies. Vivamus eleifend rutrum iaculis. Ut vulputate hendrerit nibh ac euismod. Donec in justo in purus ultrices elementum sit amet ut libero. Nam ut sapien quis sem feugiat molestie.

Placer des boîtes côte à côte

Sed viverra metus sit amet libero semper interdum. Phasellus et sapien erat. Aliquam ante sapien, dignissim vel hendrerit vitae, vestibulum et nisi. Etiam neque libero, sagittis in tempus gravida, elementum ut urna. In euismod tempus bibendum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Cras quis felis ultrices, consectetur dui vel, luctus leo. Quisque vitae diam tristique, fringilla neque nec, interdum augue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam justo mi, venenatis eu ultrices lobortis, molestie nec lorem. Pellentesque dui ex, faucibus ac lectus nec, tincidunt mattis velit. Vivamus hendrerit a libero nec pulvinar. Donec cursus velit at turpis ultrices, eget blandit ex finibus. Donec laoreet, justo eu accumsan eleifend, ex eros tempor tortor, vel porta sapien lacus eget felis. Duis suscipit ligula et tortor elementum sagittis. Aliquam dignissim est congue sapien dapibus lobortis. Fusce aliquet pharetra porttitor. Nunc vel pulvinar ligula, vel molestie libero.

Clear:both pour arrêter le flottement sur les deux côtés.
Integer vulputate leo in nisi fermentum, ac aliquam leo aliquam. Suspendisse bibendum pulvinar augue, quis tincidunt mi lacinia faucibus. Proin at diam risus. In sollicitudin odio vitae tempus ultricies. Vivamus eleifend rutrum iaculis. Ut vulputate hendrerit nibh ac euismod. Donec in justo in purus ultrices elementum sit amet ut libero. Nam ut sapien quis sem feugiat molestie.

chat chat

Un élément flottant sort partiellement du flux, il n'a plus de dimension.

Pour forcer le conteneur à englober les images, on définit un overflow:auto sur le conteneur.