DIV and CSS

Ok, I have two DIVs, horizontally next to each other. But when the one on the right is too high for the one on the left, the left DIV just stops. How can I make the left DIV carry on to the full height?

Also, the left DIV has a background image, which I dont want it to repeat, so the background must only be a colour.

The URL for an example is here.

Please mind the dodgy coding in that, I'll be eliminating the tables soon.

Thanks.
James.

 

But if you scroll right down to the bottom the left images just stop with no background color to carry it on.

 

So you want the image on the left hand side to continue to scroll / repeat?

 

Well, you have, in the HTML file a link to "div class="body" " - yet in the CSS file you don't actually have a #body thing, which is probably why it stops, as I can see in the source code for the HTML file that you have an extra paragraph that isn't showing at all.

Edit:

Well, that's how it looks in opera. Didn't check IE until now. I thin there's something wrong with the heights you've specified for the left and right divs.

Edit #2

Yeah, because you've specified the height of the left DIV to 717 PX, it then stops at 717 px.

Edit#2

If you change the height opf the left hand pane to 1125px and the height of the right hand pane to 1001px, then it works fine in both opera and IE.
Set it to 900 and then it continues.

That's why I couldn't see the last paragraph in opera, as opera decided to stop at the 717 px line

 

Ok, but as the content is dynamic, could I use a percentage?

 

Tried that - didn't like it, in either IE or Opera.

Don't think you can use % in DIV's, someone correct me if I'm wrong, I'm not entirely sure.

I've never used % in DIVs, always used pixels.

 

I have managed to use percentage to get the shadow to go 100%, and instead of declaring the left hand images in CSS, I used <img> in the Template. I still can't get the background color to fill in that small space in the bottom left.

http://www.dlockers.com/rm/?p=8#comments