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.

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! I hope this is helpful to those who obviously need a more elegant solution than that one. Why it works I have not the slightest idea.

This entry was posted on Thursday, January 31st, 2008 at 8:40 pm and is filed under css. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.