From http://www.w3schools.com (Copyright Refsnes Data)
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.
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.
img { float: left } |
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 |
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.
From http://www.w3schools.com (Copyright Refsnes Data)