css anchor div to foot of page

Question

I may bounce my head off the wall shortly, I can't believe that something as stupid as this has utterly defeated me ... therefore I turn to you, Stack Overflow ... for guidance and enlightenment.

---

Problem: Sit div at foot of page, 100% width, outside of any sort of wrapper.
Proposed Solution: http://ryanfait.com/sticky-footer/

Implementation with content: http://www.weleasewodewick.com/redesign/index_content.html Implementation with no content: http://www.weleasewodewick.com/redesign/index.html

with content -> Good, works nicely
no content = bad, footer sits exactly height of footer below the viewport.

---

I really would appreciate your input into this, it's completely vexed me for the past hour. I wholly expect some form of ridicule :)

---

Clarification: Footer should be attached to bottom of the viewport if there is not enough content to fill the page. It should move down beyond the bottom of the viewport if there is sufficient amount of content.

Thanks!
Foxed

Answer 1

Sorry if I didn't interpret the question correctly, but are you talking about placing the footer on the bottom of the page?

Try this:

#footer {
   width: 100%;
   height: 150px;  
   position: fixed; 
   bottom: 0px; 
   left: 0px; 
}

If you want the footer to stay in one place, change the position attribute to absolute.

Answer 2

I think this is probably what you are looking for:

http://fortysevenmedia.com/blog/archives/making_your_footer_stay_put_with_css/