Hey everyone,

Recently iv'e been wortking on a css footer like facebook.. heres the base css+html for you to start your own

This css provides you with the footer bar where its stays at the bottom of the page..

http://www.imgcentre.com/images/icsnap1388793347.png

Heres a simple image to show you what it looks like and heres the code:

Code: 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Facebook like footer bar</title>
<style type="text/css">
#footer_container{
	/*The main footer div witch will hold the bar*/
	bottom: 0px;
	font-size: 11px; /*Font size used within the footer unless specifeied elsewhere*/
	padding: 0px;	/*0 Padding for the footer container*/
	position: fixed;/*Fixe the containter at bottom*/
	right: 0px;
	width: 100%;/*This is not the footer width: goto -> .footer_bar->margin-(left/right)*/
}
#footer_container .footer_bar{
	background-color:#CCC; /*Or add background image here*/
	/*Margin(left/right) change for space left and right of bar*/
	margin-left: 15px;
	margin-right: 15px;
	/*Border for the outline effect, note.. DONT add border bottem*/
	border-right:1px solid #999;
	border-top:1px solid #999;
	border-left:1px solid #999;
	/*How big do you want the bar*/
	height:25px;
	/*Visibility general*/
	overflow: visible !important;
	position: relative;
	display:block;
}
#footer_container .footer_bar .footer_bar_left{float:left;left:0px;}
#footer_container .footer_bar .footer_bar_right{float:right;right:0px;}
</style>
</head>
<body>
<p>Some Content will be here</p><p>Some Content will be here</p><p>Some Content will be here</p><p>Some Content will be here</p>
<p>Some Content will be here</p><p>Some Content will be here</p><p>Some Content will be here</p><p>Some Content will be here</p>
<div id="footer_container">
	<div class="footer_bar">
    	<!--Left Side-->
        <div class="footer_bar_left">
        	Stuff on left side
        </div>
        <div class="footer_bar_right">
        	Stuff on right side
        </div>
    </div>
</div>
</body>
</html>
This works in IE,Firefox,Chrome,Opera perfectly
litewarez Reviewed by litewarez on . Facebook Sticky footer! Hey everyone, Recently iv'e been wortking on a css footer like facebook.. heres the base css+html for you to start your own This css provides you with the footer bar where its stays at the bottom of the page.. http://www.imgcentre.com/images/icsnap1388793347.png Heres a simple image to show you what it looks like and heres the code: Rating: 5