extending a background image to the bottom of the page using css

[windandwaves]

Hi Gurus

Consider the following page:

<div id="main" style="width: 933px;">

<div id="rightcolumn" style="float: right; width: 147px;
background-image: url(right.jpg); height: auto;">a bit of content
here</div>

<div id="leftcolumn" style="float: left; color: #336699; width: 167px;
height:auto;">a bit of content here</div>

<div id="contentcolumn" style="width: 561px; margin: 0px 0px 0px
184px;"> lots of content here</div>

</div>

<div id="footer" style="clear: both;">(c) me </div>

I want to extend the background image in the right column to the bottom
of the middle column. Is there an easy way to do this?
a. I could put the contentcolumn within the rightcolumn
b. I could put the background image in the main id and give it a
positioning and a repeat.

Are there any other solutions?

TIA

Nicolaas