Home Advertise with us Forum Articles Sitemap Contact

CSS Floating

CSS floating is most often used to push an element to one side or the other (left/right) in order to allow some other element to wrap around it. Floating is commonly used for moving images besides being used for layouts.

Images are floated only horizontally to the left or right side in order to have some text wrap around it. It is possible for the floated element to move as far as the horizontal extents of the containing element. While the elements after the floating element flow around it, those before the element are not affected.

Example: img{float: right;}
In case several floating elements are placed one after the other & there is enough room available, the elements usually float next to each other.

Example: .thumbnail { float:left; width:110px; height:90px; margin:5px; }

By default, the elements placed after the floating element flow around it. However, if one wishes to avoid this, the “clear property” can be used. The clear property is used to specify the sides of the element to which the other floating elements are not allowed.

Example: .text_line {clear: both;}