Place Floating Div evenly and horizontally - css

Question

I want to place 3 div's evenly inside another div. However, I can't get rid of the right margin for the last floating box. Also, the spaces between them do not look right to me.
<div class="page">
<div class="box">
<div class="b">b1</div>
<div class="b">b2</div>
<div class="b">b3</div>
<div style="clear:both;"></div>
</div>
</div>
.page{
background-color: green;
padding: 10px;
}
.box{
background-color: blue;
}
.b{
width: 30%;
margin-right: 3%;
background-color: #999;
float: left;
height: 100px;
}
The code is located at http://jsfiddle.net/u6KqK/
Is there a better solution for this?

Answer 1

You're using 99% (30+30+30+3+3+3) of the parent div, not 100%, thus why the right margin of the right-most div appears to be 4%. Here are a couple solutions:
1) set the margin-right to use the final percent:
.b{
width: 30%;
margin-right: 3.3333333333%;
margin-right: calc(10%/3);
background-color: #999;
float: left;
height: 100px;
}
Since older browsers don't support calc, I included a fallback that will be identical for essentially every scenario. Fiddle: http://jsfiddle.net/u6KqK/7/
2) Add a 1% margin to the left of the first div:
.b:first-of-type{
margin-left:1%
}
Fiddle: http://jsfiddle.net/u6KqK/1/

Answer 2

You can add a second class to the middle div and add the margins to that class. That way it only gets applied to the middle class.
<div class="page">
<div class="box">
<div class="b">b1</div>
<div class="b middle">b2</div>
<div class="b">b3</div>
<div style="clear:both;"></div>
</div>
</div>
.page{
background-color: green;
padding: 10px;
}
.box{
background-color: blue;
}
.b{
width: 30%;
background-color: #999;
float: left;
height: 100px;
}
.middle{
margin-right: 5%;
margin-left: 5%;
}
http://jsfiddle.net/u6KqK/9/

Answer 3

Since you have the left-most div on the actual left it would make sense to have the right-most also to the far right with zero margin
JSfiddle Demo
HTML
<div class="page">
<div class="box">
<div class="b">b1</div>
<div class="b">b2</div>
<div class="b">b3</div> /* cleafix div removed */
</div>
</div>
CSS
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.page{
background-color: green;
padding: 10px;
overflow:hidden; /* quick clearfix */
}
.box{
background-color: blue;
}
.b{
width: 30%;
margin-left: 5%; /* (100% - 3x30%)/2 */
background-color: #999;
float: left;
height: 100px;
}
.box div:first-child {
margin-left: 0;
}