Skip to: content, navigation

by Tommy Olsson and Paul O’Brien

float (CSS property)

Browser support full matrix
IE5.5+ FF1+ Saf1.3+ Op9.2+
Buggy Buggy Full Buggy
Spec
Inherited Initial Version
No none CSS1
float: { left | right | none | inherit } ;

Example

This style rule makes the box generated by the element with ID "nav" float to the left:

#nav {
  float: left;
}

Try it yourself!View all demos

Description

This property specifies whether or not a box should float and, if so, if it should float to the left or to the right. A floating box is shifted to the left or to the right as far as it can go, and non-floating content in the normal flow will flow around it on the opposite side. The float property is ignored for elements that are absolutely positioned. User agents are also allowed to ignore it when it’s applied to the root element.

See Floating and Clearing for more information about the behavior of floated elements.

Value

left
makes the element generate a block box that is floated to the left
right
makes the element generate a block box that is floated to the right
none
makes the element generate a box that is not floated

Compatibility

IE5.5Buggy
6.0Buggy
7.0Buggy
Firefox1.0Buggy
1.5Buggy
2.0Buggy
Safari1.3Full
2.0Full
3.0Full
Opera9.2Buggy

Internet Explorer versions up to and including 6 add three pixels of padding (in the floated direction) to adjacent line boxes.

In Internet Explorer versions up to and including 6, the left or right margins are doubled on floated elements that touch their parents’ side edges. The margin value is doubled on the side that touches the parent. A simple fix for this problem is to set display to inline for the floated element.

Internet Explorer for Windows versions up to and including 7:

  • will place a floated box below an immediately preceding line box
  • will expand a left-floated box to the width of the containing block if it has a right-floated child and a computed width of auto
  • will apply a layout to a floated element
  • don’t support the value inherit

In Firefox versions up to and including 2.0, a floated box appears below an immediately preceding line box. A left-floated box with a right-floated child and a computed width of auto expands to the width of the containing block.

In Opera up to and including version 9.2, if the computed width of the floated box is auto and it has floated children, its width is computed as if the floats don’t wrap and aren’t cleared.

Related Reading

User-contributed notes

Add a note

To post a note on this topic, please log in with your SitePoint username and password. If you don't have an account yet, you can create a new account for free.

Related Products

The Principles of Beautiful Web Design

Best Seller!

You don’t need to go to Art School to design great looking web sites!

Book Cover: The Principles of Beautiful Web Design

Download the FREE sample chapters