CSS Sticky Footer Issue

[rtmedia]

Basically I had problems making my footer stick to the bottom of the page. Some of my pages on my website are taller in height than others and sometimes my footer would appear half way up the page. I’ve managed to get my footer to stick to the bottom of each page. But it’s to far to the bottom now. Meaning that even if there is a small amount of content on the page you have to scroll down to see the footer and I can’t figure out why???

Please look at the following to see what I mean http://www.theskinpharmacy.co.uk/about_company.php

I think it’s something to do with this part of my CSS:

.container {
height: auto !important;
height: 100%;
margin: 0 auto -4em;
min-height: 100%;
padding-right: 20px;
width: 968px;

.footer, .push {
clear: both;
height: 4em;
margin: 0 auto;
width: 968px;

No matter what I change in my CSS I can’t seem to get my pages so I don’t have to scroll down what looks to be (4em) in order to see the footer on each page (no matter how big the content stretches the container down)

[rtmedia]

Thanks for pointing out the contact page height. I had that there from before I added the push and sticky footer. The extra div on the contact page is there for a reason as it will allow my client to add more text there via the CMS.

I changed the footer back to height:4em but all that did was make the actual content of the footer further from the bottom.

So you still have to scroll down the page to see the footer… any ideas?

[rtmedia]

anyone know why you have to scroll down on the page to see the footer when the content isn;t even filling up the height of the browser window?

http://www.theskinpharmacy.co.uk/index.php

[rtmedia]

Hi Virtual,

Really appreciate you taking the time to help me out.

On the code posted above I don’t understand

html:before, #container:before

Do I actually need this in my code or do you mean this is what was there before?

[Author]

Posts