How to make the footer stay at the bottom of the page

[Mark]

How to make the footer stay at the bottom of the page

I am not joking.. this deserves a thread to its self. After jumping back into the web development when creating my own site layout this one got me scratching my head and googling throws up millions of results, most of them telling you to use absolute positioning which is a waste of time and will ruin your layout once you get some content in there.

Let's just jump into this with the code.


[code=html]<!-- start footer -->
<div id="footer">

<div id="footerleft">
© 2010, All rights reserved by copyright owners.
</div>

<div id="footerright">
Layout and design created by <a href="http://markwood.co.cc" title="Mark Wood">Mark Wood </a>
</div>
</div>
<!-- end footer -->[/code]

So, we have our footer.

And our CSS

[code=css]#footer {
clear: both;
margin: 0 auto;
width: 993px;
height: 20px;
position: relative;
bottom: 0;
left: 0;
right: 0;
}

#footerleft {
float: left;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
padding-top: 13px;
padding-bottom: 10px;
}

#footerright {
float: right;
color: #FFFFFF;
font-size: 11px;
font-weight: bold;
padding-top: 13px;
padding-right: 3px;
padding-bottom: 10px;
}
[/code]

You do not need the left and right footer sections, that's just what i use. What you need to focus on is:

Code:

#footer {
    clear: both;
    margin: 0 auto;
    width: **px;
    height: **px;
    position: relative;
    bottom: 0;
    left: 0;
    right: 0;
}

width and height to suit you.

Sorry for the lack of explanation but it's rather late, this is a poke in the right direction if you need help, post below.