How to get page content to stretch and stick footer to bottom of page?

Question

I have been trying to get this my damned layout to work for so long now and its super frusterating. I am new to CSS so please be easy, but i have looked up so many articles

Answer 1

Use Css position:fixed

You can refer to this link for more info about it. http://www.w3schools.com/cssref/pr_class_position.asp

Answer 2

What you're looking for is a "sticky footer".

• The older CSS-only way of doing this requires that you know the exact height of the footer. The best solution I was able to find through a quick Google search is Ryan Fait's Sticky Footer. Ryan's tutorial works by putting a height of 100% on a wrapper element (which contains your content except the footer). This 100% height is what makes your content push the footer to the bottom of the window, and then the footer worms its way back up into the visible area using a negative margin (which is why you need to know the height of the footer… the negative margin must be the same height as the footer element). There are a few additional pieces to make it work reliably in all browsers (like the <div class="push"></div>), but that's basically what's happening.

• A newer CSS-only solution requires the use of display: table; (not supported by IE7), but allows for a variable height footer (see Sticky CSS footers: The flexible way). This is probably the method I would recommend.

The author of the second article mentions that Javascript could be used to add IE7 support, but stops short of writing the actual Javascript. At the time of this answer, StatCounter lists IE7 as having roughly 1.28% market penetration. I'll leave it to you to determine if IE7 support is important, but I'd like to add my $0.02 if I may :-p First, all users of IE7 have an upgrade path to IE8, and users who refuse to update are only making life more difficult for web developers (IE7 to IE8 open up possibilities for many important CSS2 selectors, as well as fixing many nagging float issues and making display: table; possible). In addition to making life harder for web developers, they are leaving themselves open to a multitude of browser hacks that will compromise their computer, making them an easy target for hackers looking to expand their zombie army (which makes security more difficult for everyone else). Second, Do websites need to look exactly the same in every browser? (and of course, the answer is "No") As long as having a footer on the bottom of the browser window can be considered a progressive enhancement, you shouldn't need to worry.

That being said… I updated the code so it should work in IE7 :-p Please take a look at the jsfiddle and let me know how it works.