Center inline-block div in parent while ignoring floating elements

Question

I am trying to center an inline div in its parent. The parent element also has a child div that floats to the right. Because of the right aligned div, my centered div is shifted to the left. I want to center the middle div regardless of the position/size of the floating one like the image below with the code provided.

.parent {      text-align: center;  }  .parent div {      display: inline-block;  }

<div id="parent">      <div> ... </div>      <div style="float:right"> ... </div>  </div>

The current setup has both inner divs inside the parent but I'm assuming the right way is to have the right-aligned div be outside with an absolute position?

Also, I have multiple instances of the parent div on the same page.

How can I achieve this result?

Answer 1

set the right div css

position:absolute; right:0; 

relative to the parent div

#parent { position:relative; } 

Answer 2

position:absolute is the only way

DEMO http://jsfiddle.net/kevinPHPkevin/u4FWr/1/

.center {     display:inline-block;     position: absolute;     left:0;     right:0; } 

EDITED

not sure if this has already been suggested

Or you can absolute: position; the right div instead

DEMO http://jsfiddle.net/kevinPHPkevin/u4FWr/3/

.right {     display:inline-block;     position: absolute;     right:0; }