I'm trying to make a page where I have a fixed height header and footer. I want the header at the top, the footer at the bottom, and a content box (div) to be centered vertically and horizontally in the gap between the header and footer. If the content is taller than that gap, it would push the footer down. I've made a jsfiddle with the code as I've got it so far, but it only works if the content is shorter than the gap, and it doesn't work at all in Internet Explorer (surprised?).

Where I'm at so far: http://jsfiddle.net/VrfAU/4/

If that wasn't very clear, hopefully these images make it obvious what I am trying to do.

Small content:



Large content: