PureNews

PureNews is an amazingly sleek and powerful news theme with unlimited color variations.

View full feature list Check out the live demo Buy this theme today

Understanding the float property

Posted by on 12th Feb 2009 | 2 comments

To be able to control your layouts you need to understand the float property. I’ve briefly mentioned this before and given examples of how to use it but not actually explained it in full. Note, for the following examples I’ve used inline styles, purely to give you an example and show you the code used, however, as always, external stylesheets should be used to reduce code, to create reusable code and to use CSS as it was intended for.

Example Usage

The float property allows you to control the position of specific elements and the content or other elements that follow. For example, you can position an image to the left of some content1, and have the content flow around the image, or you can make a horizontal menu by using a list and floating the items next to each other2.

Example 1: Image and Content

Sarah's Photo Floating to the left of this content is a photo of yours truly. As you can see, this text flows around the image, similar to how the now deprecated align=”left” attribute used to work for images. This, of course, is just a simple example of usage however it’s very useful to use in blog posts or on standard content pages to have your image fitting in with the content nicely.

To create the above I’ve used the following code:

[sourcecode language=”html”]

Sarah's Photo
Floating to the left of this content is a photo of yours truly. As you can see, this text flows around the image,
similar to how the now deprecated align=”left” attribute used to work for images.
This, of course, is just a simple example of usage however it’s very useful to use in blog posts or on standard
content pages to have your image fitting in with the content nicely.

[/sourcecode]

Example 2: Horizontal Menu

The above example was created with the code:

[sourcecode language=”html”]

[/sourcecode]

The difference with this and the first example is that above I’ve had to give each list item a width. You usually need to give your floated element a width unless it already has a fixed width assigned (eg. like an image), else it will expand to fit the container it’s in, and then the float would be pointless.

Clearing Floats

Often, the side effect of using a float is that people don’t understand how to stop the float from taking over. For example, if you had an image floated to the left, with some content, then a second image to also float left, and content, you would probably want one image above the other regardless of content length, however I’m sure you’ve seen sites were people have ended up with:

Sarah's Photo Floating to the left of this content is a photo of Sarah.

Kevin's Photo Floating to the left of this content is a photo of Kevin.

As you can see, this isn’t the desired outcome, so we need to clear the float using the clear property.

The clear property accepts 4 values, left, right, both or none. The property works by moving the element down until it’s clear of all floated properties to either the left, right or both, depending on which value is selected. Of course the none value is there to allow you to override a clear property if you need to (remember inheritance).

So to fix the example above we would need to clear the float for the second image and paragraph ie.

Sarah's Photo Floating to the left of this content is a photo of Sarah.

Kevin's Photo Floating to the left of this content is a photo of Kevin.

This has been fixed on the second paragraph using:

[sourcecode language=”css”]

[/sourcecode]

Often though you do not necessarily have an element to add the clear to, or you don’t want to have update every ruleset to add in a clear. So sometimes an easier fix is to create a class and just give that a property of clear eg.

[sourcecode language=”css”].clearme {
clear: both;
}[/sourcecode]

Then, you can just add the clearme class where needed. If you don’t have an element to add the class to for some reason then you can also use an empty div eg.

[sourcecode language=”html”]

[/sourcecode]

There are more sophisticated ways of clearing floated elements, the above is a basic example but should give you an idea of how to keep floats under control.

Conclusion

This is a fairly advanced aspect of understanding CSS, but once you can grasp the logic behind floats then your layout control will be so much better and you’ll find coding up layouts much quicker and easier to do.


A PHP Developer using WordPress to power both blogging and commercial CMS sites. I've written and released a couple of plugins for WordPress and am currently writing plugins for use on commercial websites.

2 comments - Leave a reply
  • Posted by smiles4angels on 12th Feb 2009

    thank you for this one.

  • Posted by David on 16th Feb 2009

    Pretty cool, thanks.

    I was using a table to fix the float problem but now it's easier:)