Centering floating divs within another div

Question

I\'ve searched other questions and, while this problem seems similar to a couple of others, nothing I\'ve seen so far seems to address the issue that I\'m having.

I

Answer 1

I accomplished the above using relative positioning and floating to the right.

HTML code:

                          
    

        

            
Float 1
            
Float 2
            
Float 3
        
    

CSS:

.outer-div { position: relative; float: right; right: 50%; }
.inner-div { position: relative; float: right; right: -50%; }
.floating-div { float: left; border: 1px solid red; margin: 0 1.5em; }

.clearfix:before,
.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }

JSFiddle: http://jsfiddle.net/MJ9yp/

This will work in IE8 and up, but not earlier (surprise, surprise!)

I do not recall the source of this method unfortunately, so I cannot give credit to the original author. If anybody else knows, please post the link!