Footer Sticks To Bottom Of Viewport And I Don't Want It To

Here is the page:

When I view the footer at first it appears directly under the main div area that is Black. But when I resize the browser, the footer seems to stick to the bottom of the viewport and I am wanting it to stay beneath the main div area that is black. Can someone take a look and offer a suggestion?


I know. Sometimes I start to add fixes that have worked in the past (as in the case from the other thread) and see if they would work in different situations. But, obviously, I am still learning and trying to grasp these solutions so that I do not have to ask the same question ever again.

I really appreciate the advice and support from the SitePoint forums and the friendships that are a direct result.


You have set your wrapper to min-height:100% and then placed your footer after it. Where do you think that will place the footer :slight_smile:

Remove the min-height:100% from your wrapper and the footer should drop back into the flow.

Safari. It happens when you resize the browser…

If you want the wrapper to always be a minimum of 100% then yes putting the footer inside the wrapper would have worked also. However,I didn’t really see a need for you to have the min-height though as you have no full length backgrounds unlike your other thread where you wanted an image to go all the way down.

Man… you are the best! I tried it and it worked. Of course! With this fix I am now wondering if the min-height: 100% would have worked if I had enclosed the footer div within the wrapper div. Would it?


Just saw the site in IE8, FF and Opera but in all three case the footer remained under the main div area when I resized the window. I which browser did this problem occur?