Replicating Facebooks Fixed Footer in CSS

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">
    <div>
      <ul>
        <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>
      </ul>
    </div>
  </div>
</div>

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 {
  position:absolute;
  bottom:0;
  left:0;
  width:100%;
  height:30px;
  background: none;
  color:black;
  font:11px Verdana, Geneva, sans-serif;
}
@media screen {
body>div#facebook-footer {
  position:fixed;
}
}
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...

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.