CSS3 References

CSS Floats

Use CSS float property to create floating Boxes,
with other elements wrapping around it.

CSS Float

Demo: CSS Float

I am not bound to win, but I am bound to be true. I am not bound to succeed,
but I am bound to live by the light that I have.
I must stand with anybody
that stands right, and stand with him while he is right, and part with him when he goes wrong.-
Abraham Lincoln
Labor is prior to, and independent of, capital.
Capital is only the fruit of labor, and could never have existed
if labor had not first existed. Labor is the superior of capital,
and deserves much the higher consideration.- Abraham Lincoln

float:

Note: In the above demo, the image floats from left to right, while the text wraps around it, typical of floats.

1. The CSS float property enables you to create floating boxes,
and place them as far as possible to the left or right of the containing element .

2. The surrounding elements flowaround the element being floated,
hence you must define the width of the floating element.

CSS float Property

Property

Description

Value

float

Makes the element to float around the surrounding elements

leftrightnone

Example: CSS - float

Give it a TRY! » Note: As we can see the outside content wraps around the floating element, within all vacant space.

CSS Floats: Float Elements one after another

1. The CSS property float can be used to stack elements side by side.

Example: CSS Floats: float boxes side by side

Give it a TRY! » Note: The fouth paragraph should have floated to the extreme left, but space is available below 3rd and second paragraph blocks its leftward movement.

CSS Clear Floats

1. Using the CSS clear property, you can clear the left
, right or both sides of the box.

CSS clear Property

Property

Description

Value

clear

To specify the side of the element where all floating elements are cleared out(removed)

leftrightbothnone

The clear property accepts 4 values:

left: All floating elements on the left side are removed

right : All floating elements on the right side are removed

both: All floating elements on the both side are removed

none: All floating elements can touch either sides

Example:CSS Property clear

Give it a TRY! » Note: The 4th paragraph has clear property set to "left",
hence it is at left extreme, with left side cleared completely .

CSS Floats: Multi Column Layouts

1. Using the CSS float
property with div element you can create multiple column layout with elements
positioned next to one another.

2. To Create Multiple columns , define the width ,float, margin property and the elements can
be floated next to each other.

Example:CSS Floats multiple Column

Give it a TRY! » Note: Above is a demo of multiple columns floating side by side, like a newspaper .