title: Horizontal alignment of 3 boxes in a wrapper
body: <p>Hey,
  I'm playing around with CSS3 at the moment and ran into a problem, using three div boxes.
  I want them to be horizontally aligned in a wrapper box without having to specify the exact margins.</p>
  
  <p>My approach has been this:</p>
  
  <pre><code>.box1 {
  background: gray;
  float: left;
  width: 250px;
  padding: 3px;
  margin: 0 auto;
  }
  
  .box2 {
  background: gray;
  float: left;
  width: 250px;
  padding: 3px;
  margin: 0 auto; 
  }
  
  .box3 {
  background: gray;
  float: left;
  width: 250px;
  padding: 3px;
  margin: 0 auto;
  }
  </code></pre>
  
  <p>which results in the three boxes, aligned left to wrapper box without any margins between them. But I want the boxes to set the margins, so the boxes are centered in the red wrapper. Any ideas to do this without exact pixel settings?</p>