I'm working on a new layout for my site that uses a header, footer and two column center region. The two columns consist of the main content area which is fluid height and width and a right sidebar which is fluid height and fixed width. I have done similar layouts before, but this one depends on using two different background images (one for the sidebar and one for the content area).

Is there any way to implement this, using proper HTML & CSS, so that the background images of the two columns are always the same height, regardless of which columns content is longer?

I've tried using JavaScript to simulate this, but it doesn't work so well if there are images in the content area. I would really prefer not to use this method any way.

Any help is greatly appreciated.

I have setup a staging environment at http://staging.jamesarmes.net/jimmyssandbox to provide an example. This environment is not my finished product, but I want to get the containers under control before I move any further