IE7: Absolutely positioned Child Div with a negative CSS value for 'right'

I've been searching for hours:

I'm creating a small bar chart that i'm animating with jQuery.

I made the 'right' bar a child of the 'left' bar so they would always stay together as I animated their width properties. Thus, the point they would never become separated during asynchronous animations. (I can animate the left bar and the right bar will just tag along..., since it's a child element)

I set the height/width of these two bars (with classes 'left' and 'right') with jQuery. I ani开发者_开发知识库mated the left bar's width property to size it. To size the right bar, I animate the CSS "right" property.

So here's the problem: The right div is not visible with a negative value for 'right' (i tried 'margin-right,' too). With positive values for 'right,' it politely appears inside its parent div (the left bar). The moment I try to place it to the right of the 'left' bar, it goes away.

HELP!! :-O

It works gorgeously in IE8, and in everything else.

<div class="container" >
                <div class="left">
                    <div class="right"></div>
                </div>  
</div>


div.left{
    background-color:#93dbfb;
    overflow:visible;
    position:absolute;
    width:300px;
    left:0px;
}

div.right{
    background-color:#ffce42;
    z-index:100;
    position:absolute;
    width:300px;
    right:-300px;
}

(again, the height/width and right properties are all animated with jQuery)

** UPDATE **

I have already tried setting the position of the right-side bar using it's LEFT property (using the value left.width + [value]). Same problem occurs.

I would make this a comment but I can't seem to make them yet. Anyway, not sure if this works on IE7 but is this something like what you were trying to do? http://jsfiddle.net/MnnyH/1/ I understand you were trying to make a chart, but this could easily be turned vertical.