Understanding the float property

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 content¹, 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 other².

Example 1: Image and Content

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:

<p><img src="http://www.bloggingtips.com/wp-content/avatars/57.jpg" alt="Sarah's Photo" style="float: left; margin: 0 5px 5px 0" />
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.</p>

Example 2: Horizontal Menu

• Link 1
• Link 2
• Link 3
• Link 4

The above example was created with the code:

<ul style="list-style-type: none">
<li style="width: 100px; float: left; text-align: center;"><a href="#">Link 1</a></li>
<li style="width: 100px; float: left; text-align: center;"><a href="#">Link 2</a></li>
<li style="width: 100px; float: left; text-align: center;"><a href="#">Link 3</a></li>
<li style="width: 100px; float: left; text-align: center;"><a href="#">Link 4</a></li>
</ul>

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:

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

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.

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

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

This has been fixed on the second paragraph using:

<p style="clear:left">...</p>

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.

.clearme {
    clear: both;
}

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.

<div class="clearme"></div>

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.

Written by Sarah from Stuff By Sarah
Posted on February 12th, 2009 and filed under CSS
Do not forget to subscribe to our RSS feed for updates

4