Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Clearing floats with the overflow property

Posted on by Clive Walker in CSS Web Design

I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.

Using the float property is a fundamental part of the tools that we use as web designers/developers when wrangling with CSS. Floating an image is probably one of the most common tasks when we want to align the image either left or right within a containing block [div or paragraph]. However, use of the float property comes with its own problems and chief amongst these is that often we need to ‘clear the float’ so that other elements [often the element that contains the floated element] behave in the way that we want.

The method that I have been using more and more recently is to add the overflow property, either overflow:hidden or overflow:auto, to my containing element. This is a simple way of clearing floats that seems to work well when you are using a floated image inside another element that needs to be cleared.

Here’s an example that shows what I mean. For the first paragraph, the image is floated right, the text is quite short, and the containing coloured background paragraph does not ‘know’ what height to use. As a result, the image ‘sticks out the bottom’ of the paragraph. Mostly this is not what I want to see. The floated element needs to be cleared so that the height accurately encompasses the floated image.

In the second case, the styles are the same and the image is floated right but I have added overflow:hidden to the containing paragraph element. As a result of this simple change, the height of the paragraph is what we intended. The float is cleared.

Here are the image styles in the example:

.image-right {
	margin: 10px;
	padding: 5px;
	background: #FFF;
	float: right;
	border: 1px solid #E0E0E0;
}

.. and the paragraph styles.

.box1, .box2 { 
	background: #E7F3CF;
	padding: 10px;
	margin-bottom: 150px; 
}
.box2 { 
	overflow: hidden;
}

Using the overflow property like this is a quick way of clearing the float without adding extra mark-up.

There are several other ways of clearing floats which I will not elaborate on here. However, All About Floats on the CSS Tricks website is a great article that explains more about floats and clearing.

Note: I don’t pretend that this method will work in all cases. Your layout and older browsers like IE6 may dictate that you need to tweak the above or use another method for clearing floats. Floating the containing element [float to clear a float] or adding another element that clears the float are two methods that may work just as well. Use the best method for your particular circumstances.

Technorati :

Does your site run on Perch CMS? Hire me to help. Perch CMS Development

Comments

  • 19 Jun 2009 08:41:56

    Nice tip, will keep this in mind. Thanks

  • 19 Jun 2009 21:39:48

    Too bad it ain’t working on IE6…
    Nice try though.

  • 20 Jun 2009 07:32:55

    @Odin: Yes, like I said, I know this method does not work in all cases and IE6 is one of those. However, other methods work with IE6 and you can also get round the IE6 problem by adding a height of 1% to your containing element. This height does not make sense but in the example I gave it has the effect of clearing the float in IE6 (and other IE browsers). I put IE6 rules like this in a conditionally commented style sheet.

Comments are OFF for this post.

© 2024 Clive Walker