Float

Shift to the left (or right) on the current line allowing other content to flow/wrap alongside.

Syntax
      float: left | right | none | inherit ;

left - Float to the left.
right - Float to the right.
None - Do not float (default).
Inherit - Assume the float value from a parent element.

Float is mainly used to position images within a block of text, but can be used to position any elements side by side, it is particularly useful when the exact sizes are unknown or subject to change.

If set to none the item will be positioned within the normal flow of text.
To prevent other elements from floating to the left or right of this one use clear.

If the browser width is too narrow to display the items side by side, they will stack vertically.

Examples:
h1 { float: right; }
.ss64class { float: left; }

#SS64id { float: right; }

Try it:

The 'Try It' control will change the float of this DIV
This div is floated left

(CSS 1) Browser Support: All major browsers.

“Float like a butterfly, sting like a bee” ~ Muhammad Ali

Related:

Clear - Set sides of an element where other floating elements are not allowed.
display - How to display an HTML element
visibility - Hide or show an element
CSS Floats 101 - A List apart


© Copyright SS64.com 1999-2014
Some rights reserved