I am assuming you want the footer to be locked to the bottom of the browser window...if so this is how I would go about it:
Clears wont help (they only create a break in floated elements)
What you need to use is fixed position
div.footer
Remove the height. No need for it.
Remove the clear.
Set the element to fixed position.
Set the bottom value to zero.
Code:
div.footer {
background:url("http://www.webdesignforum.com/images/footerbg.png") left top repeat-x;
bottom:0;
position:fixed;
width:100%;
}
Method to the Madness
By using fixed position you take the footer element out of the normal flow of the document. However by doing this, the remaining content on the page will fall behind this element, so we need to adjust for that. The easiest way to do this, is to add padding to the wrapper element (your main content).
Before we do this, you wrapper element do not have a height. This is because all of it children are floated elements. by default, floated elements will not cause their parent to expand. In order to get this "auto-expansion" for the parent (wrapper) you must set the overflow to hidden. So hopefully i did not loose you there...these adjustments also need to be added:
div.wrapper
Set the overflow property to hidden
Add the bottom padding to adjust for the height of the footer (estimated 220px)
Code:
div.wrapper {
margin:0 auto;
overflow:hidden;
padding-bottom:220px;
width:900px;
}
div.left, div.right
Remove the height from these two elements
That should do the trick. Let me know if there are any other issues.
FYI, you have a few other issues where you are using tags correctly (i.e menu in the bottom of each post)