CSS: Facebook layout

Recreating the basic Facebook layout from scratch with CSS is surely one of the most interesting style exercises that you can try to refine your CSS skills. There's nothing really difficult with this, except that the final result must be a fluid layout with percentages. The only thing that still doesn't convince me is the fact that for certain elements we have to specify heights in pixels, which is bad when a user decides to change the base font size.

This is due to the choice of using a tiled background image for the top section of the layout. Since this image has a stated height (26 pixels), you have to make sure that your elements will fit this height. I didn't test the final demo in Internet Explorer, but it works just fine in Firefox and Chrome. I can't test it in IE because I usually surf the web and work on a Mac and virtual emulators cannot emulate some oddities of this browser. So if you notice any bug, please report it here and I'll try to find a fix.

In the meantime, enjoy and study this demo! smile

Demo

Live demo