Make footer stay in same place (above the fold)

[jay0316]

I’m working on the following site: http://www.grovesfinishingtouch.com/groves/

I’d like the footer to stay where it is on the homepage for every page in the site (it shouldn’t move up or down when you go to an interior page). I don’t think the sticky footer technique will work because it will keep the footer stuck to the bottom of the window. I tried setting a height to the content area, but that doesn’t seem to work across browsers (works in FF 3.6, but it’s like a pixel or 2 off on inside pages). Is there a way to set it up so it’ll be consistent for across browsers?

[Bob]

I clicked every link in your menu, and the footer stays in exactly the same place for me. But perhaps when you add more content to your site, the footer won’t be on the same spot anymore on every page. For that, I indeed would use the sticky footer technique.

Also, I find it kinda weird that on the homepage you have a vertical menu, but on all of the other pages it’s horizontal. Is that a choice you made or is it just not finished yet? I think consistency across pages is important.

Edit: Just tested it in Safari, Chrome and IE. In IE the footer stays on the same spot, like in FF, but in Safari and Chrome it is indeed a few pixels off. I’d say try and use the sticky footer and see if that solves your problem.

[jay0316]

Hi Bob,
Thanks for taking a look!

The content is small enough that it is going to stay within that same content area on all the pages. We are designing it to fit. The navigation was meant to be different on the homepage only. Then when you click to go inside it jumps up giving you a visual clue that you are now inside the site.

My worry with the sticky footer is that if the browser window is sized bigger, the footer will move with it, and we’d like it to stay in the same place. Is there a way around that?

[Bob]

Well let’s say you’d want it to be at 500px from the bottom. What you could do, is this:

.wrapper {

min-height: 100%;

height: auto !important;

height: 100%;

margin: 0 auto -500px; /* the bottom margin is the negative value of the footer's height */

}

.footer, .push {

height: 500px; /* .push must be the same height as .footer */

}

I’m not sure this is exactly the right way though.

[Author]

Posts