Center inline-block div in parent while ignoring floating elements

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?