CSS float

An image with float set to right.
The image is right-aligned with text wrapped around it.

Water Lilies and Japanese Bridge represents two of Monet’s greatest achievements: his gardens at Giverny and the paintings they inspired. Monet moved to Giverny in 1883 and immediately began to develop the property. For him, the gardens were both a passion and a second artistic medium.

His Asian garden was not part of the original estate; it was located on an adjacent property with a small brook, which he purchased and enlarged into a pond for a water garden in 1893. He transformed the site into an inspired vision of cool greens and calm, reflective waters, enhanced by exotic plants such as bamboo, ginkgo, and Japanese fruit trees and a Japanese footbridge. It was not until 1899, however, that he began a series of views of the site, of which this is one.

<div>
  <img style="float: right; margin: 7px 10px 10px 15px;"
       src="/img/css/lillies-and-bridge-sm.jpg" />
  Water Lilies and Japanese Bridge represents two of Monet’s greatest
  achievements: his gardens at Giverny and the paintings they inspired.
  Monet moved to Giverny in 1883 and immediately began to develop the
  property. For him, the gardens were both a passion and a second
  artistic medium. <br /><br />

  His Asian garden was not part of the original estate; it was
  located on an adjacent property with a small brook,
  which he purchased and enlarged into a pond for a water garden
  in 1893. He transformed the site into an inspired vision
  of cool greens and calm, reflective waters, enhanced by exotic
  plants such as bamboo, ginkgo, and Japanese fruit trees and a
  Japanese footbridge. It was not until 1899, however, that he
  began a series of views of the site, of which this is one.
</div>      

float: none | left | right | initial | inherit;

Click the buttons to see the different float values.

none left right initial inherit

Water Lilies and Japanese Bridge represents two of Monet’s greatest achievements: his gardens at Giverny and the paintings they inspired. Monet moved to Giverny in 1883 and immediately began to develop the property. For him, the gardens were both a passion and a second artistic medium.

His Asian garden was not part of the original estate; it was located on an adjacent property with a small brook, which he purchased and enlarged into a pond for a water garden in 1893. He transformed the site into an inspired vision of cool greens and calm, reflective waters, enhanced by exotic plants such as bamboo, ginkgo, and Japanese fruit trees and a Japanese footbridge. It was not until 1899, however, that he began a series of views of the site, of which this is one.

<style>
  .float-image {
    float: left;
    margin: 7px 15px 10px 0;
  }
</style>

<div>
  <img class="float-image"
       src="/img/css/lillies-and-bridge-sm.jpg" />
  Water Lilies and Japanese Bridge represents two of Monet’s greatest
  achievements: his gardens at Giverny and the paintings they inspired.
  Monet moved to Giverny in 1883 and immediately began to develop the
  property. For him, the gardens were both a passion and a second
  artistic medium. <br /><br />

  His Asian garden was not part of the original estate; it was
  located on an adjacent property with a small brook,
  which he purchased and enlarged into a pond for a water garden
  in 1893. He transformed the site into an inspired vision
  of cool greens and calm, reflective waters, enhanced by exotic
  plants such as bamboo, ginkgo, and Japanese fruit trees and a
  Japanese footbridge. It was not until 1899, however, that he
  began a series of views of the site, of which this is one.
</div>

This table shows when float support started for each browser.

Chrome	1.0	Dec 2008
Firefox	1.0	Nov 2004
IE/Edge	4.0	Sep 1997
Opera	7.0	Jan 2003
Safari	1.0	Jun 2003

• Our CSS float Property Reference
• Our CSS right Property Reference
• Our CSS left Property Reference
• Our HTML Layout Tutorial