Body content overlapping footer

How can i make it so my footer can extend to the bottom of the page with ought having my body overlap it?

I'm new to all this and would appreciate some quick help. ^_^

/* footer */

#templatemo_footer {
clear: both;
width: 780px;
height: 75px;
padding: 30px 90px 0 90px;
text-align: center;
color: #3b3838;
background: url(images/templatemo_footer.jpg) no-repeat;

}

#templatemo_footer a {
font-weight: bold;
color: #000000;
}

#templatemo_footer .footer_menu {
margin: 0 0 5px 0;
padding: 0px;
list-style: none;
}

.footer_menu li {
margin: 0px;
padding: 0 20px;
display: inline;
border-right: 1px solid #000000;
}

.footer_menu .last_menu {
border: none;
}

/* end of footer */

I love this method: http://boagworld.com/technology/fixed-footers-without-javascript

Here's a really well commented/barebone example I made for you: http://blog.pressedweb.com/demos/fixed_footer/

I love this method: http://boagworld.com/technology/fixed-footers-without-javascript

Here's a really well commented/barebone example I made for you: http://blog.pressedweb.com/demos/fixed_footer/

this method is good too. less code, as well.

http://ryanfait.com/sticky-footer/

I remember disliking something about Ryan Fiat's version, but after skimming it's code over, it still looks like hacks and garbage. !important, empty .push div.. Dunno, Boag's version just seems so much cleaner to me.