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.