Css: Fix floated divs that overflow the wrapping

It's a common problem. The floated sidebar (or whatever you've floated this time ;-) get's to much content, and suddenly it overflows the wrapping div. The code might look like something below.

<div id="wrapper">
    <div id="sidebar"></div>
    <div id="content"></div>
</div>

Now if the sidebar is floated, and has longer content than #content, it will expand outside #wrapper. This problem is often solved by appending an extra element inside #wrapper, and apply CSS clear:both to it.

But this extra HTML doesn't look so nice. A friend of mine pointed me to a blog entry which had some different takes on the problem. One of these solutions was so elegant, I just had to write this notice about it!

The solution is to add the CSS attribute overflow and set it to auto. If you experience problems with scrollbars, try hidden instead. Note that this is yet to be tested by me, but the example seemed to work in the major browsers.