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
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
|
HOME
Printer friendly page
