Faux column hell

Alright, I know this one has been beaten to death but here goes…
I have a theme that is basically laid out like this (I’ll excerpt the main points).

page {
background: url("<?php bloginfo('stylesheet_directory'); ?>/images/bg.png") top repeat-y ;} 

<div id="header"> <-- top header image/ingo
<div id="page"> <-- used for "faux column" background as per above
  <div id="content> <-- content of posts/pages
  blah
  </div>
  <div id="sidebar"> <-- obligatory sidebar to the right of the content
  ul etc.
  </div>
  <div id="footer"> <-- no problems here clear: both lands on the bottom
  site name/powered by..
  </div>
</div> <-- end of "page" where background "works".

Here’s where I get messed up. If I end the “page” div after the footer all is well and the faux column extends to the end of the footer. While this is all fine and dandy, if I wanted that, but I have a transparent png at the footer that looks strange. If I end the “page” div before the footer and the contents of the “content” div is longer than the sidebar, I end up with the background image ending just after the sidebar. I know this is not how a faux column should work. What am I missing? I’m fairly new to designing with css as I usually muck around with backend than front end. I know I’m leaving out a lot of detail, but I’ll fill in any blanks. Thanks in advance.