Replicating Facebooks Fixed Footer in CSS

The contents of this article may be out of date. It has been archived and will no longer be updated, comments are closed and the page is provided for reference purposes only.

Facebook's new layout unveiled last month (March '09) has proved to be controversial among many Facebook users. One element that has received an overhaul is the footer bar that is fixed to the bottom of the page. I was interested in creating a fixed position footer for another project so while I did some research on the best way of going about creating a fixed footer I had a go at replicating the Facebook version.

You should be able to see the example at the bottom of your browser window on this page. I created this version without looking at the actual Facebook CSS or HTML. When I was finished I looked at the Facebook source and as I assumed they use a lot of DIV’s combined with javascript events. My solution is done purely in CSS and does not have any function but links and menus would be easy to add for yourself. The example uses a selection of the excellent and freely available (under an attribution license) Silk icon set.

Lets have a look at the code, starting with the HTML:

<div id="facebook-footer">
  <div id="controls">
        <li class="icon"><img src="shape_square.png" title="shape"></li>
        <li class="text">Applications</li>
        <li class="separator">&nbsp;</li>
        <li class="icon"><img src="world.png" title="world"></li>
        <li class="separator">&nbsp;</li>
        <li class="icon"><img src="pictures.png" title="pictures"></li>
        <li class="icon"><img src="group.png" title="group"></li>
        <li class="icon"><img src="date.png" title="date"></li>
        <li class="icon"><img src="newspaper.png" title="newspaper"></li>
        <li class="chat">Chat (0)</li>
        <li class="icon-chat"><img src="status_offline.png" title="offline"><img src="bullet_red.png" title="bullet"></li>
        <li class="chat separator">&nbsp;</li>

This HTML can be placed almost anywhere in the body of your document. We have our container DIV “facebook-footer” that is in a fixed position at the bottom of the page. The child DIV “controls” contains the contents of the footer and sets it’s margins relative to its parent, this is what allows the bar to appear centered in the browser. There is a further child div that is used purely to create the white line under the top border. The DIV is there for presentation rather than content but I could not find another way to add the line in between the border and background colour without using an image for the background which I wanted to avoid. Inside all the DIV’s is an unordered list displayed as inline-block list items, this technique is used in many CSS horizontal list menu tutorials.

Now the CSS:

div#facebook-footer * {padding: 0; margin: 0;}
div#facebook-footer {
  background: none;
  font:11px Verdana, Geneva, sans-serif;
@media screen {
body>div#facebook-footer {
div#facebook-footer div#controls {
  background: #fff;
  margin: 0 20px 0 20px;
  line-height: 29px;
  border: 1px solid #b5b5b5;
  border-bottom: none;
div#facebook-footer div#controls div {
  background: #e5e5e5;
  margin-top: 1px;
  padding: 0 10px 0 10px;
div#facebook-footer .separator {
  border-left: 1px solid #b5b5b5;
  margin-left: 3px;
div#facebook-footer div#controls ul, li {
  margin: 0;
  padding: 0;
div#facebook-footer div#controls ul {
  list-style: none;
div#facebook-footer div#controls li {
  display: inline-block;
  line-height: 27px;
  height: 29px;
  padding-right: 6px;
div#facebook-footer .icon {
  vertical-align: text-bottom;
div#facebook-footer .icon-chat {
  padding-top: 3px;
div#facebook-footer .chat, .icon-chat {
  float: right;
div#facebook-footer .text {
  vertical-align: top;

The first line is used to set the padding and margins to zero for all child elements of “facebook-footer” mainly to override other rules this site applies to certain elements. The @media target medium is an attempt to improve things for IE users but has not been tested. The rest should be quite straight forward, we are applying our borders, background colour, padding and margins and making each of the list elements display inline as they would appear in a portion of text.

The remaining classes are used to align the controls in the footer more precisely.

Note, this was created as an experiment and therefore has only been tested in Safari 4. Please let me know if it works in your browser or not however I do not intend to develop this further but that said you are free to suggest any improvements you have implemented for yourself using this example. You are free to experiment with this code yourself and use it as you see fit without any restrictions.

This article was posted on 17 April 2009 in Code, CSS


What you have had to say about all this...

Good work dude!!!

- Manish Surolia

Aah, thanks
Was searching for this script too much and found it here :D
Thanks for sharing

- DuFFeR

Really fantastic! I’m testing and I noticed that the a href tags are not working. :( You tell me anything about it? Thanks

- Renzo

thanks man, I’ve been looking around everywhere for something like this that worked with window resize and scrolling. Good job.

- jonathan hall

Gud looking dude .....

- Arun

Not working in IE6…....

- neerav

I am reading this article second time today, you have to be more careful with content leakers. If I will find it again I will send you a link.

- Johnvu

That's the end of this article. I hope you found it useful. If you're enjoyed this article why don't you have a look around the archives, where you can find some more tutorials, tips and general ramblings.