CSS Error: HTML and Body set to 100% height, but content overflowing...

Question

See here for an example: http://www.pwnedgaming.net/content/testcss/.

If you look at the source code, you'll see that the left_column DIV, when set to a large height, makes the page fill the screen correctly, but the DIV that needs this behaviour is page_content. Yet no matter what I do with the page_content DIV, it just causes the page to overflow.

Can anyone offer some suggestions? I've been pulling my hair out. All the online pointers work correctly when you don't have floated divs, but I need the layout to be fluid.

Thanks,

Kai.

Answer 1

This is because page_content is floated, therefore stopping it from affecting layout (e.g. increasing the height of the parent container). You have three options:

• Use display: inline-block; instead of float: left; (my personal favourite)
• Use clearfix ( http://www.positioniseverything.net/easyclearing.html )
• Insert an empty div element just before the end of the container with clear: both;

For three stacked columns in a layout as simple as that, I'd strongly recommend the first. Just change all of the float: left; declarations to display: inline-block. They'll still stack sideways like floated boxes. Please note that you may have to tweak the vertical-align on the elements; sometimes they don't all align to the top when this is done.

Answer 2

Your class "clear_both" doesn't actually have "clear:both" on it. At least when I added that declaration in Firebug, the page-ending graphic jumped down to where you'd expect.

Also, height definitions are generally unreliable in my experience.

Answer 3

I'm not %100 certain I understand what you're trying to do. I interpret your question as being "Why is div.content the wrong height? Why is div.footer on top of the content of .page_content?"

You can address this by applying an overflow:hidden CSS property to div.content.