Search within TutorialsPark

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. Abraham Lincoln dollor 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 flow around 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
left
right
none

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)
left
right
both
none

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 .