Use CSS float property to create floating Boxes, with other elements wrapping around it.
Demo: CSS 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
|float||Makes the element to float around the surrounding elements
Example: CSS - floatGive 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 sideGive 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
|clear||To specify the side of the element where all floating elements are cleared out(removed)
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 clearGive 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.