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

Do you have a question? Post it now! No Registration Necessary.  Now with pictures!

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

 <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 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?



Site Timeline