Sticky Footer

First published on Feb 11, 2010 by Simon Foust

This is how to make a block of content stick to the bottom of the browser window. This is known as a “sticky footer”.

The HTML:

<div id="wrap">
	<div id="content">
		<p>Hi.</p>
	</div>
</div>
<div id="footer">
	<p>Footer content goes here.</p>
</div>

The CSS:

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

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

#content {
	width: 100%;
	padding-bottom: 150px;
	overflow: hidden;
}

#footer {
	position: relative;
	margin-top: -150px;
	height: 150px;
	clear: both;
}

Why This Works

Once you have specified that the major container is to stretch the full height of the browser window, you’re simply putting the footer container after (or below) it in the markup, and then you apply a negative margin to the top that is equal to the footer’s height. Then you simply give your content container the same amount of padding on the bottom so that the content within it doesn’t run into the footer.

I use the width: 100%; overflow: hidden; to make sure that floats are cleared. In other words, in case you have some containers like sidebar and mainContent that are floating left or right, they won’t spill out below the content container.

Internet Explorer needs the body > #wrap { height: auto; min-height: 100%; } because, well, it’s Internet Explorer.

That’s pretty much it. There are other methods out there that use an empty <div> that work fine too if your OCD will let you get away with having the empty container.

Relevant Links

http://www.cssstickyfooter.com/
http://ryanfait.com/sticky-footer/