float (CSS property)
| IE5.5+ | FF1+ | Saf1.3+ | Op9.2+ |
|---|---|---|---|
| Buggy | Buggy | Full | Buggy |
| Inherited | Initial | Version |
|---|---|---|
| No | none |
CSS1 |
Example
This style rule makes the box generated
by the element with ID "nav" float to the
left:
#nav {
float: left;
}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
| IE | 5.5 | Buggy |
|---|---|---|
| 6.0 | Buggy | |
| 7.0 | Buggy | |
| Firefox | 1.0 | Buggy |
| 1.5 | Buggy | |
| 2.0 | Buggy | |
| Safari | 1.3 | Full |
| 2.0 | Full | |
| 3.0 | Full | |
| Opera | 9.2 | Buggy |
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.
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.
