I'm trying to position the footer div (id="Footer") 10px from the bottom of the screen. Regardless of whether the page content fills the entire height of the screen or creates a scroll area, I want the div to always be at the very bottom with a 10px margin.
Using position: absolute caused issues where content would fall underneath the footer if it extended past the page height.
HTML:
<div id="Footer" >
<table>
<tr>
<td>© Copyright 2012 Company. All Rights Reserved</td>
</tr>
</table>
</div>CSS:
#Footer table {
width: 100%;
max-width:1250px;
bottom:0px;
height:30px; /* Height of the footer */
font-weight:bolder;
background-color: black;
margin-left: auto;
margin-right: auto;
text-align:center;
color: white;
font-size:20px;
border: 3px solid white;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#Footer {
clear: both;
position: fixed;
bottom: 10px;
background-color: #15317E;
clear: both;
width: 100%;
}