New "hidden footer" works, but still overlaps content at the bottom of the screen

I'm in the middle of designing http://www.vanessacaroline.com and in need of a bit of CSS assistance. If your current screen resolution doesn't make the problem obvious, try re-sizing the window so that the sample 2-column layout would push the footer--most simply demonstrated by grabbing your browser window's bottom edge, and dragging up.

Gross right? Not only does the content not push the footer down the way it should, but the page doesn't even create a scroll bar.

If you scale the window horizontally, the 2nd floated column div drops down and floods the footer.

However, if you shrink the window horizontally, eventually the column content begins to push the footer down... which is the correct functionality, but I can't seem to get rid of that initial flooding.

I've been trying to make a relatively fluid layout; I used this reference: http://ryanfait.com/sticky-footer/ for the footer code. I've seen a few other ways on the net, but I went with this one -- I want normal content/scroll-bar behavior, with a footer always stuck to the bottom of the page; can anyone help?

Thanks!

Edit: I updated the site with the first suggestion--clear:both in the #push, and a position:relative for #wrapper, #push and #footer. Now the footer appears below the threshold of the loaded screen position...which creates a nice "hidden footer effect."

I like this -- but demonstrated at extremely thin screen-resolutions, the footer o开发者_开发问答verlaps the content at the bottom. How do I avoid this???

---

You should remove negative margin from #wrapper and set clear:both; position: relative; for #push. Hope this helps :D

---

Try adding position:relative to both your footer and wrapper. Then clear:both to #push. See if that helps.