100% height divs not at 100%

Question

I'm working on this website: www.lumn.net . The center panel (#overall) is supposed to be a div that stretches from the top to the bottom of the page. For some reason I can't figure out, I'm getting space at the bottom of every page. Even stranger, on only two pages, lumn.net/index.shtml and lumn.net/about.shtml, there's space at the top and the bottom both. <-- fixed

html and body both have height:100%.

If I set the height of the center panel to 100%, on the pages with extra space only at the bottom, it instead goes to 600px, a minimum height for one of its internal divs, and content beyond that runs out the bottom. On the pages with extra space at both the top and the bottom, nothing happens.

Setting top:0 and bottom:0 for the center panel has no effect on any of the pages.

I have no idea what I'm doing wrong or how to fix it other than things I've already tried.

Update: the problem with the space at the bottom was due to my footer being outside the center div and moved up into it using negative margins. When I move it inside, however, I still have a strange bit of extra space below it: lumn.net/about.shtml. How can I sit it inside my #overall center div properly?

Answer 1

Try changing the padding-bottom on #overal:

padding-bottom: 18px

Does that solve your problem?

Answer 2

On the homepage and about page you have some strange extra characters "? " Maybe a php tag badly open?

Have you tried tp put a height of 100% on #overall? (for me it works...)

Answer 3

Your footer has a height of 28px (including the border) and a top of -42px. That leaves 16px of #overall sticking out below it - only 8px of which seems to be intentional.

As for the top of the page, that seems to be caused by an extraneous question mark (barely visible in the upper left-hand corner of the page).