*Edit*: I have not tested this with legacy browsers (e.g., IE6 or IE7) and cannot guarantee it will work in your browser. If folks have fixes for particular browsers, I recommend you post them in the comments section below.
One of the issues I’ve come across with CSS is dynamic layout. It’s not very intuitive as far as how to create a layout that responds to certain conditions. For example, consider the condition of regardless the height of the content of a page, the footer should stick to the bottom of the page. A lot of CSS layouts have footers that stick to the bottom of their content divs; as the content div; shrinks and grows, the footer jumps all over the place. This makes the interface more confusing for users as elements are constantly moving around; the interface is not consistent across different pages. Here is an example of what I’m referring to:
We can use JavaScript (JS) to fix this problem, however there are some issues that come with this approach: (1) it is more code you have to maintain, (2) generally speaking, JS should not be used for manipulating layout, (3) css is optimized for most browsers; css is a lot faster compared to JS when it comes to layout manipulation, (4) a lot of JS uses onDomReady() or the jQuery $.ready() function which waits until the page loads to execute JS; this means the user will see your “raw” layout for a few milliseconds before the JS “fixes” whatever layout issues you are having. Issue (4) is especially ugly as users start out seeing one type of layout, and then it quickly changes to something else.
Using the preferred CSS method, we can force the footer to stick to the bottom of a page, regardless of the height of the content. You can view my example here. If you resize the browser window, you will notice that the footer remains at the bottom of the page at all times. I also recommend to use Chrome Dev Tools or Firebug to manipulate the CSS and HTML real-time; try changing the height of the content div so it exceeds the height of the window. You will notice the footer will remain on the bottom.
To accomplish this effect, we will make use of the position and bottom properties in CSS.
To start, we break our page apart into four sections. (1) The #wrapper div (this is a container div which will hold all the other divs), (2) the #header div, (3) the #content div, and (4) the #footer div:
<html>
<body>
<div id="wrapper">
<div id="header">
<h1>Header</h1>
</div>
<div id="content">
<h1>Content</h1>
</div>
<div id="footer">
<h1>Footer</h1>
<div style="clear: both"></div>
</div>
<div style="clear: both;"></div>
</div><!-- end #wrapper -->
</body>
</html>
Now that we have the basic structure of our site, we can start configuring the CSS. First off, we have to set the position property of the #wrapper div to relative:
#wrapper{
border: 1px solid black;
width: 600px;
margin-left: auto;
margin-right: auto;
position: relative; //make #wrapper position non-static
min-height: 99%;
}
Making the #wrapper div’s position relative indicates to the browser that the div is non-static.
Secondly, we have to to set the #footer div’s position property to absolute. This tells the browser that the #footer div’s position should be relative to its first non-static ancestor element. In our case, the first non-static ancestor element of the footer div is the wrapper div (which is technically the footer’s parent div).
Finally – to get the desired effect of having the footer “stick” to the bottom of the page, we have to add the bottom property to the #footer div. The bottom property tells the browser to position the #footer div’s bottom edges x pixels above or below the bottom edge of its contain element (#wrapper).
Here is the CSS for the footer div:
#footer{
height: 50px;
background: blue;
position: absolute; //tells the browser to position #footer relative to #wrapper
bottom: 3; #sticks the footer 3px above the bottom edges of the #wrapper div
width: inherit;
text-align: center;
}
To see the full page and the full CSS, click here.
Using CSS to force the footer to the bottom of the page gives the page a cleaner look. We could have taken the JS approach, but in my opinion, CSS is a cleaner solution for this type of problem.
It seems to be working just when you scrunch the screen by minimizing it and bring the bottom up using your cursor/mouse to flex the screen to different sizes the footer rides up over the header and content. It does seem to be working for all the current browser versions that are out there.
The thing is will it work for the older legacy browsers that some companies have held onto due to the inability to upgrade their Operating Systems?
Good point. Unfortunately I have not tested this in legacy browsers. I will update the post and make a note that I have only tested in modern browsers.
It is not working in the demo..
Is it not working in the demo……
On my Mac, works great on Chrome and Safari; however, not Firefox 25 (latest version). footer is stuck beneath the content div (as in your starting point image above). Justin, was the height: 100% a fix for Firefox?
doesn’t work…
I’m using Firefox 25. You demo doesn’t work i.e. the footer isn’t sticking to the bottom of the page. I’m working on an easy solution to this problem too. I’ll let you know what I come up with.
Appears to work in Chrome.
Fixed it. Add height: 100% to the body.
Well Done Justin !
Your fix works in Firefox 25 making this the best footer solution I have yet seen.
Thanks Rafiki.
…. but just as a footnote, beware that adding the HTML5 doctype declaration ” ” to the top of the document, appears to break this in Chrome.
Hey your demo doesn’t work 🙁 Is there an alternative to this method?
Hi Paul – What specifically isn’t working in the demo?