CSS conundrum here...

I've been trying to make a fairly (what I thought) simple layout: header, scrollable content area, and a footer. In a nutshell, the footer should "float" to the bottom of the browser, and the content area should meet the footer and "float" with it. Also, the content area should be able to scroll (thus, not pushing the footer off the page).

My problem is: I can't seem to set the height of the content area to stop expanding to the bottom of the screen (so, as it is now, the scrollbar appears behind the footer). Here's a link to a working example:


And the CSS:


(they're both pretty messy...but that's what happens when I keep on trying different things in code)

I feel as though I should be able to assign (in that offending "centeredBox" class) a value to the amount of pixels up from the bottom of the browser that div will stretch to. From what I’ve read, giving it a “bottom: 20px;” value should move the bottom value up 20px from the bottom…but it’s just not doing that.

Anyone run into anything like this...or can give any pointers? It'd be much appreciated...thanks!