So this has been a problem we’ve all encountered when coding out sites with CSS tableless layouts. When you have divs floated left and right it takes them out of the flow of the page and basically they don’t read as content within a container div. Traditionally I’d been using another div with “clear:both” in one way or another after the floats, or *gasp* a defined height. I was searching for an alternative method when I discovered this article on the Sitepoint blog, which claims simply using “overflow:auto” on the container div will force it to behave. Initially I was skeptical, but I have been using this method for a few weeks in production, and holy smokes, it works! Additionally my comrade Mark Wyner states that “overflow:auto” does not work in ie6, however using “overflow:hidden” will work. So give it a try, you will be amazed…I was. Some report this doesn’t work in ie5 on Mac…but c’mon if you’re on a mac you SHOULD be using Safari at this point!

*update*
Mark discovered another thing about this which seems only true in Safari. If you have floats below floats this will not work, you should try additionally adding “clear:both” on your floats below.