How to get an element centered while a floated element is next to it?

How to get an element centered while a floated element is next to it?

I have an element that I want centered relative to the page, while having
a floated element inline with it.
Html:
<div class="container">
<span class="centerMe">I should be centered</span>
<span class="ontheright">I'm on the right!</span>
</div>
CSS:
.container{ text-align:center }
.centerMe{
margin-left:auto;
margin-right:auto;
}
.ontheright{float:right;}
The problem is that the centered element is centered relative to the space
left over, after the floated element uses it up. I want it to center
relative to the full width of the container. I have tried using
position:absolute instead of float, but then it collides when the screen
is too small.
http://jsfiddle.net/j5Mff/