Centering Multiple Floated Elements

The need was to have multiple floated fixed-width elements, sometimes two, sometimes three, to stay centered on the page without needing to adjust the html code.  Not as easy as one would think.  Of course its easy if you know how many elements you are going to have, and thus know the width that the floated elements need — just put the floated divs within another wrapper div of fixed width and center that div.  Its a bit harder when you don’t know the actual width of the wrapper div.  The trick is to tell the wrapper div to behave like a table, so instead of expanding to a width of 100%, it only expands to the width of the divs that it contains:

<style> 	
   .box{ 			
         width: 200px;  			
         height: 300px; 			
         float: left; 		
      }
    .wrap{ 			
         margin: 0 auto; 			
        display: table; 			 		
      } 
</style>  

<div class="wrap"> 	
    <div class="box">Left</div>
    <div class="box">Right</div>
</div>

I can add another floated div to this, and all three of them should still stay centered on the page.