html, body, #wrap {
margin: 0;
height: 100%;
}

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

#main {
padding-bottom: 300px;
}

#footer {
background-image: url('images/footer.jpg');
background-repeat: repeat-x;
position: relative;
margin-top: -300px;
height: 300px;
clear:both;
text-align: center;
} 

clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}

.clearfix {
display: inline-block;
}

* html .clearfix { height: 1%;}
.clearfix {display: block;}