1

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?

poetiscariot
  • 189
  • 1
  • 2
  • 12
  • Could you give us more details? Like exactly which div is suppose to stretch from top to bottom. Even better, post the code (and details such as the one aforementioned) on jsfiddle.net – Raekye May 25 '12 at 03:58
  • There's quite a few related articles to the right of this page. Getting divs to expand 100% of the browser window is a sadly difficult process, but a well documented one. Try looking through a couple dozen of those, if you still have issues, post back :) – DACrosby May 25 '12 at 05:05
  • http://validator.w3.org/check?verbose=1&uri=http%3A%2F%2Fwww.lumn.net%2F – ShibinRagh May 25 '12 at 05:33

3 Answers3

0

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...)

tibo
  • 5,326
  • 4
  • 37
  • 53
  • For me, it causes #overall to shrink to the height of the browser window (plus its padding). – Brilliand May 25 '12 at 04:44
  • I get a similar result to Brilliand's when I set height:100% on #Overall -- but I have no idea where that ? came from! It was just at the top of my file before even the doctype declaration. – poetiscariot May 25 '12 at 11:49
0

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).

Brilliand
  • 13,404
  • 6
  • 46
  • 58
  • Oh, right, the footer did something really strange when I moved it inside the #overall (center) div, where the background got detached from the content. I thought I'd trick it into working by leaving it outside #overall and moving it up with margins, but didn't realize it would leave extra space at the bottom. – poetiscariot May 25 '12 at 11:46
  • & as I said above, I have no idea where those errant ?s came from -- they were at the beginning of those two files before the doctype declarations. I don't know how long it would have taken me to see them if someone hadn't pointed them out. At least that was an easy fix. – poetiscariot May 25 '12 at 11:50
0

Try changing the padding-bottom on #overal:

padding-bottom: 18px

Does that solve your problem?

Wesley
  • 2,204
  • 15
  • 14
  • It does, I just figured out the same thing -- the 60px bottom padding was left over from my earlier wrong attempt to position my footer. – poetiscariot May 25 '12 at 12:30