html5 Site Icon CSS3 Site Icon CSS Site Icon

CSS 1/2 Reference

CSS float property

Definition

The CSS float property allows us to move an element to the left or right edge of its containing element.

Applies To

All elements.

Property Values

Also set the CSS width property when floating any element other than images.

left - The elements is moved to the left edge of its containing element.

inherit - The element will inherit the float property of its parent element.

none - No floating occurs and the element will be positioned according to the normal flow.

right - The elements is moved to the right edge of its containing element.

Default Value

Default value is set to none which means the element will be positioned according to the normal flow.

Inheritance

The float property is NOT inherited from the parent element unless specified using the inherit property value.

Browser Anomalies

IE5, IE6 and IE7 do not support the inherit property value.
IE8 does with a valid !DOCTYPE.
IE9+ supports the inherit property value.

Example



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
         "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<!-- Our HTML/CSS for the CSS position property follows -->
<html  xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS 1/2 Reference - CSS float Property</title>

<!-- Valid values for CSS float Property are:
	
	left, inherit, none and right.
	
--> 

<style type="text/css">

.div1 {
  border: 1px solid black;
}

/* Float left */
.img1 {
  float: left;
  border: 2px solid green;
}

/* Float right */
#img2 {
  float: right;
  border: 2px solid blue;
}

</style>

</head>
<body>
<h1>CSS float Property</h1>
<h2>Float an image left</h2>
<div class="div1">
<p>
<img class="img1" src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" />
Floating an image to the left within a div. Notice how the text wraps 
to the right of the image. Some filler text. Some filler text. Some filler text.
Some filler text. Some filler text. Some filler text. Some filler text.
Some filler text. Some filler text. Some filler text. Some filler text.
Some filler text. Some filler text. Some filler text. Some filler text.
</p>
</div>
<h2>Float left and Right</h2>
<div class="div1">
<p>
<img class="img1" src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" />
<img id="img2" src="http://htmldoctor.info/images/beefalepiesmall.jpg"
    alt="Beef and Ale Pie" />
Floating 2 images to left and right within a div. Notice how the text wraps 
around the images. Some filler text. Some filler text. Some filler text.
Some filler text. Some filler text. Some filler text. Some filler text.
Some filler text. Some filler text. Some filler text. Some filler text.
</p>
</div>
</body>
</html>

How It Looks

The results of using the float property with the values above will look something like the following:

When you cut and paste the code, adjust the screen size to see the effects of floating.

notepad
CSS empty-cells    << Prev          Next >>   CSS font

go to home page Homepage go to top of page Top

CSS properties

The complete set of visual CSS properties from the latest 2.1 Specification.

Click the links for more information on individual properties and their values.