Question

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 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?

Answer 1

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