we are going to build a CSS-3 sticky footer that always stays at the bottom of the web page, no matter how much you minimize your browser vertically, it will always stay at the bottom of the page.
We will also throw in some CSS-3 shadows and some other goodies as well.

So then, lets start by putting in the HTML that we require

<div id="stickey_footer">
 <!-- Begin Footer Menu -->
<ul id="footer_menu">
 <li><a href="#"><span>Home</span></a></li>
 <li><a href="#">Services</a>
 <li><a href="#">Portfolio</a>
 <li><a href="#">Friends</a>
 <li><a href="#">Blog</a>
 <li><a href="#">Testimonials</a>
 <li><a href="#">Contact</a>
 </ul>
 
 <ul id="social_icons">
 <!--Social Icons -->
 <li><a href="#" ><img src='images/twitter.png' alt="" /><span>Twitter</span></a></li>
 <li><a href="#" ><img src='images/digg.png' alt="" /><span>Digg</span></a></li>
 <li><a href="#" ><img src='images/flickr.png' alt="" /><span>Flickr</span></a></li>
 <li><a href="#" ><img src='images/facebook.png' alt="" /><span>Facebook</span></a></li>
 </ul>
 
</div>

Thats it, Short and sweet

Now lets go and throw in some css that does all the hard work for us

But first we need to make the footer stay at the bottom and not anywhere else. So lets just do that

#stickey_footer { /* This will make your footer stay where it is */
 background: none repeat scroll 0 0 #1D1D1D;
 border: 1px solid rgba(0, 0, 0, 0.3);
 bottom: 0;
 font-family: Arial, Helvetica, sans-serif;
 height: 40px;
 left: 50%;
 margin: 0 auto 0 -490px;
 padding: 0 10px;
 position: fixed;
 text-shadow: 1px 1px 1px #000000;
 width: 960px;
}

The margin, and the position is the real trick to this tutorial;
The fixed position enables to footer to move as you resize it. Pretty neat huh?

Next, lets make our menu curvey, add in some hover effects and shadows.

</pre>
/* border curves */
#stickey_footer {
 -moz-border-radius: 10px 10px 0px 0px;
 -webkit-border-radius: 10px 10px 0px 0px;
 border-radius: 10px 10px 0px 0px;
}
 
/* hover effect */
#stickey_footer:hover {
 background: none repeat scroll 0 0 #2b2a2a;
}
 
/* shadow for the footer*/
#stickey_footer {
 -moz-box-shadow:0px 0px 11px #191919;
 -webkit-box-shadow:0px 0px 11px #191919;
 box-shadow:0px 0px 11px #191919;
}
 
#footer_menu {
 margin: 0;
 padding: 0;
 width:auto;
}
 
#footer_menu li {
 list-style: none;
 float: left;
 font-size:12px;
 padding: 12px 14px 14px 14px;
 border-right:1px solid rgba(0, 0, 0, 0.4);
 background: rgba(0, 0, 0, 0.1);
}
 
#footer_menu .imgmenu {
 padding:5px 8px 3px 14px;
 float:left;
 background:url("images/home.png") 13px 5px no-repeat;
 width:36px;
 height:30px;
 border:none;
 border-right:1px solid rgba(0, 0, 0, 0.4);
 cursor:pointer;
}
 
#footer_menu li:hover {
 background:#202020; /* Fallback color for old browsers */
 background: rgba(0, 0, 0, 0.3);
}
 
#footer_menu .imgmenu:hover {
 background:url("images/home_hover.png") 13px 5px no-repeat;
}
 
#footer_menu li a {
 display: block;
 color: #cccccc;
 text-decoration: none;
}
 
#footer_menu li a:hover {
 color: #ffffff;
}
 
#footer_menu li span {
 display:none;
}
 
#stickey_footer #social_icons {
 float:right; /* social icons positions */
 width:auto;
 margin:5px 15px 0px;
 padding:0px;
 overflow:hidden;
}
 
#stickey_footer #social_icons li {
 margin-right:12px; /* 12px is the space between each one of them */
 float:left;
 width:24px;
 padding:0px;
 height:32px;
 list-style:none;
 _margin-right:0px; /*for IE6 */
}

There, all tucked in nice and neat. And its all set to go.

Tested and works on all major browsers that support css-3 . Sorry no IE 6-7-8.