Question

http://www.coffeeproteindrink.com/method-athlete/

I am trying to remove the open space below the main wrapper, in Firefox it shows about a 20px open area, with a verticalscroll bar on the main page in order to see it.

In IE there is a visible 115px area, with no scroll bar.

My goal is to have the main_wrap + footer sit flush to the bottom of the page, but nothing I am trying is seeming to help.

#main_wrap {height: 390px;
background: url(images/content_back.png) repeat-y top left; 
margin: 0 0 0 240px;
opacity: .8;
position:absolute;
top:325px;
overflow: hidden;
}

#main
{position: relative;
width: 680px;
padding: 0 40px 5px 40px;
font: normal 12px Verdana, Arial, sans-serif;
line-height: 20px;
display: inline-block;
z-index: 2;
}

#footer
{ 
width: 680px;
padding: 25px 40px 0 0px;
font-size: 12px;
position: relative;
height: auto;
clear: both;
bottom:50px;}

Example of what I am trying to accomplish: http://www.bio-genix.com/

Thanks for any help,
Ken

Answer 1

Turns out you don’t need a sticky-footer technique because your background image is stretching to the screen, meaning you can use height: 100% and it’s reliably set to the full height.

So, seeing that, bottom: 0 will work on #main_wrap. The next puzzle was where the phantom 60px or so of bottom margin was coming from; finally, after tweaking, it was determined that overflow: hidden would hide the additional height that was developed by the margins and paddings within the #main_wrap element.

This is what ended up working (the h2 part a fix for a fix):

#main_wrap {
    position: absolute;
    height: 390px;
    bottom: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}
#main {
    padding-bottom: 0;
}
#main_wrap #main h2.section_title {
    margin: 20px 0 40px
}

http://jfcoder.com/test/methodsite.html