Facebook Sticky footer!

**litewarez** · 10th Dec 2009, 01:29 AM

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 10th Dec 2009. 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

**shadow.prx** · 10th Dec 2009, 01:33 AM

Very sexy might use this in the future was thinking about something like this for my site
Thanks litewarez love you snippets of codes you keep posting keep it up man they are very useful

**DeLeTeD** · 10th Dec 2009, 01:42 AM

yea litewarez code snippets are always awesome

Facebook Sticky footer!

Thread Tools

Display

Facebook Sticky footer!

Sponsored Links

Thread Information

Users Browsing this Thread

Similar Threads

LE with WarezRace l 2UV,3* l Footer-Footer

Can i pay for sticky thread?

FREE Facebook Advertising $100 Voucher! STICKY?

[WTB] sticky thread

Tags for this Thread

Posting Permissions

themaCreator - create posts from...

themaPoster - post to forums and...

themaLeecher - leech and manage...

themaManager - edit and manage...

themaCreator - create posts from...