Float: Text wrapping

Jeff Andersen (CSS / Beginner)

What float does is enables you to manipulate the direction that an image will push to when other content is applied around it. In programs such as Microsoft Word, this ability is commonly named text wrapping. This method also works if you want two div's to be side by side.

Float is generally easy to use and takes little to no time to apply. If you have a paragraph of text (i am just going to use lipsum filler text) and an image you would like to wrap that text around then you simple put the image tag right above the paragraph tags.
<img src="image/path/image.gif" class="rightfloat">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Ut sit amet arcu. Duis in nulla nec urna pulvinar malesuada. Cras dui mauris, fermentum vitae, vulputate ac, congue sit amet, lacus. Cras quis lacus. Proin bibendum, purus a egestas tempus, lectus pede ullamcorper felis, in ornare velit odio quis felis.</p>
Now we have to setup the class (classes are talked about in another article posted here at Siteguts.com) There are a few ways of setting up this class, we can either have it only be used with images by using img or we can set it so that we can float any object. I am going to set it so it can be applied to any object, although i will include the code example for just images.
.rightfloat {
float: right;
margin: 5px;
}

/* Restrict the class to images */
img.rightfloat {
float: right;
margin: 5px;
}
We set a margin so that the text won't touch the image, you can decide how far you want your text away but i chose 5 pixels. The float property can be setup to be left or right.

© Copyright 2006 - All Rights Reserved - SiteGuts is a part of the Enthonia Content Network