CSS Tutorials and CSS Articles » CSS Floats http://www.cssmaster.co.uk CSS tutorials and articles Tue, 02 Feb 2010 01:43:09 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 CSS Floats http://www.cssmaster.co.uk/css-floats http://www.cssmaster.co.uk/css-floats#comments Wed, 27 Jan 2010 23:43:13 +0000 CSS Master http://www.cssmaster.co.uk/?p=87 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:

CSS Float

CSS Float


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.

]]> http://www.cssmaster.co.uk/css-floats/feed 0