signalkraft

Sticky Footer in 960 Grid System

…and other CSS Frameworks

“Sticky Footers” are containers that stick to the bottom of every page, no matter how much whitespace is between the footer and the preceding content. A popular method involves fixed height, negative margins & paddings as well as a number of hacks to ensure cross-browser compatibility.

Here’s how you adapt CSS Sticky Footer to the 960.gs Grid CSS Framework:

Quick Steps

  1. Add the footer CSS to your 960.css
  2. Search & Replace 150px in the CSS with the real height of your footer
  3. You need the elements #wrapper and #content in your HTML above the footer (see example)

Before

This might be how part of your website looks now:

HTML (before)
<body>
	<div id="content" class="container_16">
		<!-- Content -->
	</div>
	<div id="footer">
		<!-- Footer -->
	</div>
</body>

After

This sticky footer needs two surrounding wrappers above it, so go ahead and add another around #content. I’ve called it #wrapper in this example:

HTML (after)
<body>
	<div id="wrapper">
		<div id="content" class="container_16">
			<!-- Content -->
		</div>
	</div>
	<div id="footer">
		<!-- Footer -->
	</div>
</body>

Here’s how the CSS should look, this example assumes your footer is 150px high.

CSS
/*  
Sticky Footer Solution
by Steve Hatcher
http://stever.ca http://www.cssstickyfooter.com
*/

html, body, #wrapper {height: 100%;}

body > #wrapper { height: auto; min-height: 100%; }

/* must be same height as the footer */
#content { overflow: auto; padding-bottom: 150px; } 

#footer {
	position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear: both;
} 

/*Opera Fix*/
body:before { /* thanks to Maleika (Kohoutec)*/
	content: "";
	height:100%;
	float: left;
	width: 0;
	margin-top: -32767px; /* thank you Erik J */
}