Help with a Sticky Footer

I am following this sticky footer tutorial for [URL=“http://dgtgroup.co.uk/aarc”]my website.

It works fine, except if the browser window is taller than 790px, the footer breaks (In Chrome, Firefox and Safari).

In Internet Explorer, the footer doesn’t work at all.

This page is a good example of the problems as it is quite long.

Could someone give me some pointers on how to fit it.

Thanks for any help!

This forum has a definitive sticky footer method here which I recommend you read.

Also, its author just posted this handy little summary today:

It’s better you read those to understand the principles involved. Then you may not need help. See how you go.

Thank you so much! I had to tweak it a bit, but it works fine, even on ie6!

The Ryan Fait footer is broken in many browsers and I would avoid using it at all. It doesn’t work properly in IE7, 8 and opera.

I don’t see the logic of what you are doing as you say you want a sticky footer but then you go and use position:fixed for half of it?

The mechanics of how the footer work are explained in the faq and it should help you to see what can (and can’t be done).

You can’t add any padding, positive margins or borders to the 100% high wrapper because that would make it too big. It can only be min-height:100% high. If you need padding then add padding to inner elements.

I would offer some code but I wasn’t sure what sort of effect you were going for. It looks like you have a fixed header and footer on the left so I’m not sure where the sticky footer fits in.

The footer does seem to be sticky on the left side in Firefox but as I mentioned Ryans technique is flawed and doesn’t work properly in IE7, 8 and opera.

Whoops too slow - I got interrupted :slight_smile:

The idea is that when you scroll down, the second half of the footer appears and you get the full footer. I’m hoping that seeing the full footer form will subtly reminder users of the telephone number/contact details.

I used the Ryan Fait footer as it seemed quite popular and was linked on several websites. However, I wish I used your one first, as it is much better. It doesn’t need any unnecessary mark up (such as the push div) and works perfectly in all browsers, even IE6 (And as bonus, from building your footer, I event learnt about content before/after pseudo selectors, which I never knew about - I can see them being super handy on future projects).

The tutorial was very well written and perfectly explained concepts such as min-height.

Thanks again for all your help.

Ahh ok I understand now :slight_smile:

The tutorial was very well written and perfectly explained concepts such as min-height.

Thanks again for all your help.

Glad you found it of some use and good that you have things working now :slight_smile: