signalkraft

Sticky Footer in 960 Grid System

…and other CSS Frameworks

Sticky Foot­ers” are con­tain­ers that stick to the bot­tom of every page, no mat­ter how much white­space is between the footer and the pre­ced­ing con­tent. A pop­u­lar method involves fixed height, neg­a­tive mar­gins & paddings as well as a num­ber 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 ele­ments #wrapper and #content in your HTML above the footer (see exam­ple)

Before

This might be how part of your web­site 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 sur­round­ing wrap­pers 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 exam­ple 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 */
}