Solve this HTML/CSS issue?

I have multiple divs where the left side is an image (varying heights per div) that will determine the height of each div. The right side of the div has a header on top with content below, so header is solid color and content another solid color.

My issue is the right side has rounded corners, so I need to have an image on the top and bottom for all x-broswering. I don't want to adjust the height for every div based on the height of the left image. Is there a way of setting it up so the the right side will match the height of the left image?

does this make sense?

EDIT: Sorry, this wasn't clear. This should help: http://jsfiddle.net/xtian/cMs7m/

I was not able to use PIE because I need only specific corners to be rounded and it only supports开发者_运维百科 all 4 being rounded. I had to just use images, which I would love to get away from but with IE, its not really possible yet.

I'm not sure I understand you exactly, but let's try...

If leaving IE out is not an option, you should look for solutions such as CSS PIE and others that can emulate CSS3 features in IE. I've used PIE and it does the trick marvellously for border radius. Can't quite remember what other things could be used, but I'm pretty sure there were like 2 more solutions that are pretty common. Would using CSS3 instead of rounded corner images solve your problems?

Not quite sure that I understood the question well, but if it's about having rounded corners, I think the time is totally right to stop using images for this and start using CSS3:

http://www.css3.info/preview/rounded-border/

easy...

for old IE's I think there are alternate solutions:

http://msdn.microsoft.com/en-us/library/bb250413%28v=vs.85%29.aspx