CSS float Property

The float property aligns an element in a container.

An element can align (float) to the left or the right.

This property is useful for images with wrapped text.

Example

#

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>      

Syntax

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

Values

#

Value Description
none Default. Does not float element
left Floats element to the left of its container
right Floats element to the right of its container
initial Sets the value to its default value.
inherit Inherits the value from its parent element.

More Examples

Click the buttons to see the different float values.

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>

Browser support

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

You may also like

Guides