Categories
Current category items
Post title

Pure CSS: Sticky Footer

Post content
Annotation
Looking for a CSS only sticky footer? Lazy reading long manuals? Skip everything and download it right now here!
Date created
Posted in "Web" at February 8th, 2008
Tags
Ad
Article

With this entry I want to start a new bunch of articles under the subtitle of „Pure CSS“. Basically this means that I will be posting a number of articles dealing with web design issues and ways those issues can be solved in the most efficient and elegant way using CSS only! no JavaScript!

Specifically in this article, titled “Sticky Footer”, I will give you a step by step guide on how to create css sticky footers at the bottom of the page. I know that there are other methods out there and this issue has attracted more attention recently, but this is what I use and in my view it’s cleaner and applicable to existing HTML structures.

It fulfills all main requirements of this type of solution: (a) it sticks at the bottom of the page only if all other content of the page does not occupy the full height of the page; (b) it works on IE5+, FF1+, Opera7+, Safari2+ and maybe even more; (c) and most importantly, it’s pure CSS.

So let’s get started…

Step 1: HTML markup

The first thing we do is get acquainted with the basic HTML markup for this project. As I mentioned before this is a common HTML structure. We have a page container and content inside. The only thing that might be odd is that the footer is below and not inside the page container. This is important. Other than that it’s pretty straightforward:

<div id="container">
 <div id="content"></div>
</div>
<div id="footer">My Sticky Footer</div>

Step 2: “body stretching”

Secondly, stretch html, body and page container elements to full window height. Notice that to make page container inherit body overflow I am using min-height property. Since IE6 or earlier does not support this, we have to make sure that IE, but only IE, applies height property to fix it. Here’s the right way to do it:

html, body, #container { height: 100%; }
body > #container { height: auto; min-height: 100%; }

Step 3: positioning the footer

Thirdly, we have to place the footer right after page container, creating a body overflow. However, we want it to be visible, so we forcibly move it up overlapping the bottom of page container — negative top margin for that reason. To make sure the whole footer is visible, negative margin must be equal to defined footer height. To fully secure footer’s position let’s clear both sides of floating elements, just in case.

#footer {
 clear: both;
 position: relative;
 z-index: 10;
 height: 3em;
 margin-top: -3em;
}

Step 4: finishing touches

Finally, we have to protect page content bottom from finding itself behind the footer by doing this:

#content { padding-bottom: 3em; }

Note that padding value is equal to footer height.

There you have it! You might want to check this sticky footer in action to get a sense of how it’s working.

This entry was posted on Friday, February 8th, 2008 at 11:42 am and is filed under Web. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Blog navigation
Comments

Comments

Leave a Reply

  • (will not be published)
Footer