Sussex countryside

It's made my business run better! Get a 10% lifetime discount when you Sign up for FreeAgent

Clearing floats with the overflow property

Posted in on 18 June 2009

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 :

Related Posts

Comments

  1. Vim

    Nice tip, will keep this in mind. Thanks

  2. Odin

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

  3. Clive Walker (Author)

    @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

Enter your comment below. Fields marked * are required. You must preview your comment first before finally posting.





Sponsors

Shopify makes it easy to open an online store by providing all the tools and help you need. Click here to try it for free!

Subscribe RSS Feed

RSS icon