stevenclark.com.au

Nothing about this post is new or unknown to many people much smarter than myself. I don’t usually post CSS solutions here because there are fantastic resources out there already. This CSS problem is simple - an outer div contains floats. The floats pop out the bottom of the div and this is shown best by putting a simple border on the div to show its got no height. This is exactly what’s meant to happen. Although, in Internet Explorer the float is contained.

But if we’ve got a situation where we want floated content to stay wrapped within the div what do we do?

I’m posting this because nearly every time I see advice on this question the answer put forward is to add an extra div into your markup at the end of the initial enclosing div (after the floated content) and setting the CSS to clear that element. That’s simply clear: both;.

The problem with that situation is that you’re adding markup to appease the problem rather than keeping it in the stylesheets. After all, this is a presentation problem and not a content problem.

I don’t know what other people do with this one but here’s my solution that’s kept me on the straight and narrow for the last few years at least. I have three options which I can apply to the container div to make the floats stay within its borders.

1. overflow: auto;
2. overflow: hidden;, or
3. display: table;

I mainly use the overflow: auto solution and haven’t had any unhealthy side effects so far - if you know of any down side kindly comment and put me straight. I just thought it might be useful posting this solution simply because so many professional forums and websites insist that you need to add another div to your markup - god forbid!

Update: 3/6/08
For those who develop only in Firefox then fix Internet Explorer later you might want to look at this in both browsers. I tend to develop across both rather than doing one then addressing the other at the end. With this particular issue, Internet Explorer wrongly contains the float while Firefox and other browsers require this fix. So to answer someone’s recent question, my understanding is that display: table; fixes the containing issue in Firefox (and others) and is fine because Internet Explorer (not having table) should just ignore it. Everyone’s happy. So its important to check across browsers when fixing bugs.

By the way, I’ve had several particularly buggy behaviours from display: table;, depending on where it fell in the layout, so its the third alternative I turn to. I hope this helps.

This entry was posted on Thursday, July 3rd, 2008 at 9:30 am and is filed under css, web standards. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.