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

HTML & CSS
1

Here is the page:

http://www.tocdocs.com/index.091010.html

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?

Todd

2

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.

3

Hi,

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.

4

Safari. It happens when you resize the browser…

5

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.

6

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?

Todd

7

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?