In HTML only thing we can’t style is select box using css. Here is the way we can do it using JQuery. See the demo here

Click this link to download the Example

There are many footer stick methods to be found in Google. I’ve tried many of them and they usually fail in some regards. The Problem it seem that the old code may not properly work on new browsers. I tryed a way that it will work in my works. Check the Code below.

The HTML Code

Below is the basic structure of the HTML code. You’ll notice how the footer <div> sits outside of the wrap <div>.

<div id="container">
	<div id="wrap" class="clearfix">
	</div>
</div>

<div id="footer">

</div>

You would place your content elements inside the main <div>. For example, if you were using a 2 column floating layout you might have this;

<div id="container">

	<div id="wrap" class="clearfix">

		<div id="content">

		</div>

		<div id="side">

		</div>

	</div>

</div>

<div id="footer">

</div>

A header could be placed inside the wrap but above the main like this;

<div id="container">

	<div id="header">

	</div>

	<div id="wrap" class="clearfix">

	</div>

</div>

<div id="footer">

</div>

If you wanted to place any elements outside of either the wrap or the footer then you would need to use absolute positioning else it messes up the 100% height calculations.

The CSS Code

Below is the CSS code makes your sticky footers to stick to the bottom.

html, body, #container {height: 100%;}

body > #container{height: auto; min-height: 100%;}

#wrap{padding-bottom: 150px;}  /* must be same height as the footer */

#footer {position: relative;
	margin-top: -150px; /* negative value of footer height */
	height: 150px;
	clear:both;}

You’ll notice that the footer height is used three times here. This is important and should be the same value for all three instances. The height properties are stretching the wrap <div> to the full height of the window. The negative margin of the footer brings it up into the padding created for the main <div>. Since the main rests inside the wrap the padding height is already part of the 100%. Thus the footer rests at the bottom of the page.

But we are not done just yet. We need to add the clearfix properties to the main <div>.

Clearfix Hack to the Rescue

Many CSS designers will be familiar with the Clearfix Hack. It solves a lot of problems with floating elements. We use it here to get the footer to stick in Google Chrome. It also solves issues that come up when using a 2-column layout where you float your content to one side and your sidebar to the other. The floating content elements inside the main <div> can cause the footer to become un-stuck in some browsers.

So we add this to our stylesheet as well;

.clearfix:after {content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;}
.clearfix {display: inline-block;}
/* Hides from IE-mac \*/
* html .clearfix { height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

If you prefer to use the Ryan Fait method with the extra push <div> you’ll still need to apply a clearfix if you are using a floating multi-column layout.