Center wrapped text around float

Question

Hi,

I have a site with a parent element that contains a right-floated image and a content div that wraps along and below it. I'm trying to center certain elements in the content div, but am having trouble getting non-IE browsers to recognize the available width. In other words, if I give the object a percentage width like "70%", non-IE browsers give it a width of 70% of the parent element, whether the space for the left content is comprised by the floated object or not. Here's simplified code to demonstrate the behavior:

<style type="text/css">
#wrapper {width: 800px; border: 1px solid #770000; padding: 15px}
hr {width: 70%; margin: 5px auto;}
#contentright {float: right; width: 400px; height: 200px; border: 1px solid 
#000000;} 
</style>
<div id="wrapper">
<div id="contentright">

</div>
<div id="contentleft">
 <p>TEXT TEXT TEXT</p>
 <p>TEXT TEXT TEXT</p>
 <p>TEXT TEXT TEXT</p>
 <hr>
 <p>TEXT TEXT TEXT</p>
 <p>TEXT TEXT TEXT</p>
 <p>TEXT TEXT TEXT</p>
 <p>TEXT TEXT TEXT</p>
 <hr>
</div>  

</div>

I'd like it to appear the way that it does in IE, but I'd be shocked if IE was the one browser rendering it correctly. If I set an explicit width, Firefox then centers the object (<hr> in my example) in the way that I'm looking for, but Chrome still centers it based on the wrapper. Any help?