First of all want you remove this step from your css
* {
width:100%;
margin:0 auto;
padding: 0;
font-family:arial;
overflow-x: hidden;
position: relative;
}
You can leave only those but sometimes it extra rules and no need to use it
* {
margin:0;
padding:0;
}
font-family you need to use in body tag - like this
body {
font: Arial, Helvetica, sans-serif;
}
As for your question. Here is an example how to stick footer to the bottom (as I correctly understanding what you trying to achieve)
HTML
<div id="wrapper">
<div class="w1">sdfsdfsd</div>
</div>
<footer id="footer">ssdfsdfs</footer>
CSS
html, body {
height: 100%;
margin: 0;
}
#wrapper {
min-height: 100%;
width: 100%;
}
.w1 {padding-bottom:50px /*footer height*/;}
#footer {
height: 50px;
margin-top: -50px; /*equal to footer height */
position: relative;
width: 100%;
}