What's making my page extend slightly beyond the viewport? [CSS]

Question

Basically I'm a tad confused. You'll see at http://furnace.howcode.com , in the second column, the bottom scrollbar button is extended slightly beyond the end of the viewport. I'm pretty confused as I've been examining the CSS and can't find anything that's causing this.

Can you have a look? It's probably something simple that I've just missed! :)

Screenshot:

Answer 1

Height on #tabscontainer element.

#tabscontainer {
 background-color:black;
 height:90px;
 max-width:529px;
 min-width:326px;
 overflow-x:hidden !important;
 width:100%;
}

Try:

#tabscontainer {
 height:30px;
 ...
}

Follow-up on comment:

Decrease the #ajaxresults height then:

#ajaxresults  {
   height:70%;
   max-height:70%
   ...
}

Answer 2

It's because you have used a fixed pixel height on #tabscontainer but a percentage on #ajaxresults. Resizing the window will show (or cut) more of the scrollbar since 90px won't always be 10% of the viewport.

The easiest way to fix this is to set #tabscontainer to have height:10%.

EDIT: Just noticed your comment about the tabs being a fixed height. Looking for an alternative fix.

Okay, found a fix though I haven't tested this in IE so you may want to have a look at that ;)

1. Give #col2 a position:relative
2. Remove height:90%, min-height:90% and max-height:90% from #ajaxresults.
3. Give #ajaxresults: position:absolute, top:90px and bottom:0.

Try that out and it should work as intended, but like I said I haven't checked IE so you may need to do a little more hacking to get it to work there.