CSS Floats

January 27, 2010 - Posted by CSS Master

Often you’ll want an item to be left or right aligned with text wrapped around it, this is what CSS Floats are used for. CSS Floats are used in the majority of CSS layouts, they’re very handy and you should learn how they work inside and out.

The best example to use for CSS floats is floating an image to the left or right and having text wrap around it. Take the following example:

To achieve the above is easy, let’s take a look at the mark-up.
[code]<div>All of your text here. <img src="images/floated.jpg" alt="Floats" class="floatleftexample" /> and the rest of your text here </div>[/code]
And now the CSS…
[code].floatleftexample { float:left; }[/code]
This will force the image to ‘float’ to the left and all text to flow around it.

If you use floats on block elements you can quite easily make very effective columned layouts. Floating two divs to the left and setting widths will give you two adjacent elements. Handy.