I have done extensive research on all the various ways to create a "sticky footer" that sticks at the bottom of the page (and below all content), regardless of browser size. They all work beautifully, except when I attempt to apply it to my fluid width layout. Every approach I've used for my page has broken my layout somehow (due to my inexperience no doubt).
I am basing my layout on Chris Coyier's Perfect Fluid Width Layout, found here:
This does include a footer, but it is stuck at the bottom of the content, so if the content is short, the footer is above the viewport, which I don't want.
The major difference in my layout is that I want the page wrapper to extend to the bottom of the page regardless of content, as demonstrated here:
And of course I'm struggling to find a way to stick a footer at the very bottom, below all content. If the content is shorter than the viewport, I want the footer at the bottom of the viewport. If content is longer than the viewport, I want the footer below all content.
I have tried many sticky footer methods, such as those found here:
(which are perfect examples of what I'm trying to achieve)
But the only one I've had limited success on is the method described at the bottom of this page:
And here is my messy attempt to apply this sticky footer method on my actual design:
In FF it the page doesn't even properly extend beyond the content, but at least the footer is in the right place (albeit not wide enough). If anyone can make heads or tails of this, I'd be most grateful. I'm hoping for something that will validate and work cross-browsers. Please let me know if there's anything I need to clarify. I believe all the code can be viewed by looking at the source, but I can also paste whatever code necessary upon request.