Image sidebars with CSS and hacking!

I have been trying to figure out for a while how you can get image based sidebars to go to the bottom of the page cleanly. Hunting around the net I kept on almost finding the answer. However there seemed to be two camps: those that used no images, and are fully resizable, and those that have images, but cannot resize the central bit of text.

I had a skin for media wiki that I quite like. However it uses tables to get the bars to the bottom. The HTML is also very complex, and so I thought: Right! I want to clean this up.

What followed was a lot of pain. HTML/CSS simply doesn't like giving away the height of the screen to objects. If you pick a background color, it fills the area. However a background image doesn't.

I have finally solved the problem, and put it up for anyone that wants to achieve the same goal. The solution took a bit of lateral thinking, and is (to me at any rate) quite non-obvious. However it works. See the page here.

Hope it helps someone out!