Scholar Repository
Home>Manual>CSS Float Property

CSS Float Property

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

CSS float Property


CSS Reference 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.


CSS Reference Complete CSS Reference

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

Home>Manual>CSS Float Property