Horizontal alignment of 3 boxes in a wrapper

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.

My approach has been this:

.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;
}

which results i开发者_运维百科n 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?

Hmm. Well you can't use margin-auto on floated values. I'd give them exact pixel margins. More control.

Do you expect to not know the width of the red-wrapper?

Also, all those classes are the same, just call it "box" and reuse that for all your boxes.

.box{
  background: gray;
  float: left;
  width: 250px;
  padding: 3px;
  margin: 3px;
}

<div id="red-wrapper">
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</div>

EDIT: (was thinking about this. Thought I'd share a different structure that might give you the results you're looking for.)

.bigbox{
  width:33%;
  float:left;
}

.box {
  background: gray;
  width: 200px;
  padding: 3px;
  margin: 3px auto;
}

#red-wrapper {
  width:100%;
  background:red;
  overflow:hidden;
}

<div id="red-wrapper">
  <div class="bigbox">
    <div class="box"> </div>
  </div>
  <div class="bigbox">
    <div class="box"></div>
    </div>
  <div class="bigbox">
    <div class="box"></div>
  </div>
</div>

jsFiddle

If its suitable for your purpose, inline-block might help. Fiddle.

I had this problem and I used Flex box. https://www.w3schools.com/css/css3_flexbox.asp you can wrap it to fit elements when zooming in.