CSS For Stick Footer

In every website, Footer’s position depends upon the content size of the page. And very often we notice that different pages has different content size. Some pages has more content to display & some has less content to display.

Specific code is used to display footer at bottom. Following is the code:

CSS Require for stick Footer

html, body{

  height: 100%;

  height: 100%;

#Page{

  position: relative;

  min-height: 100%;

* html #Page{

  height: 100%;

#Footer{

  position: absolute;

  bottom: 0;

In this code, we have given minimum height of 100% for the class named body & html. And <div> tag named "page div" is also used in the above code. Firstly, give position as relative i.e. "position: relative". By giving this, contents of page will properly display in Firefox as well as in Netscape.
But to get proper view in IE, you have to give (* html#page) as shown in the above CSS code. And for proper footer's position you have to give "position: absolute" & bottom as zero.

CSS Designing

#Header{

  text-align:center;

  background-color: #003366;

  color:#FFFFFF;

  padding:2em 0;

#Page{

  background-color:#ffffff;

  width: 760px;

  margin: 0 auto;

  min-height: 100%;

  text-align: left;

  text-align:center;

#Footer{

  width:100%;

  padding:2em 0;

  text-align:center;

  vertical-align:middle;

  background-color: #003366;

#Footer ul{

  margin:auto;

#Footer li{

  display: inline;

  border-left: 1px solid #ffffff;

  padding-right: 1em;

  padding-left: 1em;

#Footer .First{

  border:none;

#Footer li a{

  color:#ffffff;

XHTML

<div id="Page">

    <div id="Header">Header</div>

    <div id="Content">Boday Content</div>

    <div id="Footer">

       <ul>

          <li class="First"><a href="#">Support</a></li>

          <li><a href="#">Employment</a></li>

          <li><a href="#">Contact Us</a></li>

       </ul>

    </div><!-- End of Footer Div -->

</div><!-- End of Page Div -->

Click here to view fix footer.