css footer not displaying at the bottom of the page

Question

this is my code for my footer, how can i make it display at the bottom of the page rather than right underneath my content above it?

/*footer */
#footer .column          


        

Answer 1

Fixed your footer in bottom with cool effect
Check full page design in jsfiddle Jsfiddle

Home
link1
link2
link3
link4




 H1
 h2
 h3
 h4
 h5
 h6

 H1
 h2
 h3
 h4
 h5
 h6

 H1
 h2
 h3
 h4
 h5
 h6



    
kulbhushan charaya

and css is

body {
    background: #ffffff none repeat scroll 0 0;
    padding:40px 0;
}
header{
  position:fixed;
  top:0;
  z-index:999;
  left:0;
  width:100%;
  background:#fff;
  border-bottom:1px solid #ccc;
}
header ul li {
  display: inline-block;
  list-style: outside none none;
  padding: 5px;
}
header ul li a {
    color: #000000;
    text-decoration: none;
}
footer {
  bottom: 0;
  left: 0;
  position: fixed;
  text-align: center;
  width: 100%;
  z-index: -1;
}
footer h1 {
  margin: 0;
}
.wrapper {
  background: #ffffff;
  padding: 0 15px;
  z-index: 1;
}