CSS Float Property

From http://www.w3schools.com (Copyright Refsnes Data)

# CSS float Property

Complete CSS Reference

## Definition

The float property sets where an image or a text will appear in another element.

Inherited: No

Note: If there is too little space on a line for the floating element, it will jump down on the next line, and continue until a line has enough space.

Note: Content, background, and borders of inline elements should go in front of the float. Background and borders of a block element should go behind the float, but the content of the block element should go in front of the float.

## JavaScript Syntax

CSS properties can also be dynamically changed with a JavaScript.

Scripting Syntax: object.style.cssFloat="left"

In our HTML DOM tutorial you can find more details about the cssFloat property.

In our HTML DOM tutorial you can also find a full Style Object Reference.

## Example

img { float: left }

## Possible Values

Value | Description
--- | ---
left | The image or text moves to the left in the parent element
right | The image or text moves to the right in the parent element
none | Default. The image or the text will be displayed just where it occurs in the text

## Try-It-Yourself Demos

A simple use of the float property
Let an image float to the right in a paragraph.

An image with border and margins that floats to the right in a paragraph
Let an image float to the right in a paragraph. Add border and margins to the image.

An image with a caption that floats to the right
Let an image with a caption float to the right.

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.

Complete CSS Reference

From http://www.w3schools.com (Copyright Refsnes Data)