CSS Basic

CSS HOME
CSS Introduction
CSS Syntax
CSS Id & Class
CSS How To

CSS Styling

Styling Backgrounds
Styling Text
Styling Fonts
Styling Lists
Styling Tables

CSS Box Model

CSS Box Model
CSS Border
CSS Outline
CSS Margin
CSS Padding

CSS Advanced

CSS Grouping/Nesting
CSS Dimension
CSS Display
CSS Positioning
CSS Floating
CSS Align
CSS Pseudo-class
CSS Pseudo-element
CSS Image Gallery
CSS Image Opacity
CSS Image Sprites
CSS Media Types
CSS Attribute Selectors
CSS Don't
CSS Summary

CSS Examples

CSS Quiz

CSS Quiz
CSS Exam

CSS References

CSS Reference
CSS Reference A to Z
CSS Reference Aural
CSS Web Safe Fonts
CSS Units
CSS Colors
CSS Colorvalues
CSS Colornames

CSS float Property

Complete CSS Reference

Example

Let an image float to the right:

img
{
float:right;
}

Try it yourself »

More examples at the bottom of this page.

Definition and Usage

The float property specifies whether or not a box (an element) should float.

Note: Absolutely positioned elements ignores the float property!

Default value:	none
Inherited:	no
Version:	CSS1
JavaScript syntax:	object.style.cssFloat="left"

Browser Support

The float property is supported in all major browsers.

Note: No versions of Internet Explorer (including IE8) support the property value "inherit".

Property Values

Value	Description
left	The element floats to the left
right	The element floats the right
none	The element is not floated, and will be displayed just where it occurs in the text. This is default
inherit	Specifies that the value of the float property should be inherited from the parent element

Try it Yourself - Examples

Let the first letter of a paragraph float to the left
Let the first letter of a paragraph float to the left and style the letter.

Creating a horizontal menu
Use float with a list of hyperlinks to create a horizontal menu.

Creating a homepage without tables
Use float to create a homepage with a header, footer, left content and main content.

CSS tutorial: CSS Classification

HTML DOM reference: cssFloat property