How to align 'n' divs horizontally WITH margin/padding? - css

Question

I have the following HTML:
<div class="top_buttons">
<div class="top_button">
<img src="img/image1.png">
</div>
<div class="top_button">
<a href="#">
<img src="img/image2.png">
</a>
</div>
<div class="top_button">
<a href="#">
<img src="img/image3.png">
</a>
</div>
</div>
And the following CSS which works perfectly:
.top_buttons{
width: 100%;
height: auto;
margin: 0 auto;
overflow: hidden;
}
.top_button{
float: left;
width: 33.333%;/*Because I have 3 images with the same width, I want each to have 1/3 of the total width space available (mobile website)*/
}
The problem comes when I want to add some margin and/or padding to the inner divs (that is, the parents of the images). If I add a border/padding/margin to those divs, the above 33.333% I set will not work anymore as obviously each "top_button" div will contain not only the image, but the border/padding/margin added to the div too.
So, my temporary solution was to decrease that percentage to something like 31%. However, depending on the cell phone, more or less pixels will be left in the right side of the screen, as I am just trying to guess the length that the div will have with the extra border/padding/margin in terms of percentage. What I want is a solution that I can still use 33.333% even if I set borders/padding/margins to the inner divs, so I can have a pixel perfect horizontal alignment.
In short, how can I align 'n' divs horizontally knowing that the divs will have border/padding/margin too and that I do not know the total width of the "top_button*s*" div (because the width of the display varies depending on the phone screen).

Answer 1

Use box-sizing. Box-sizing allows you to add padding and border without worrying about breaking the width. However, margin will still break the alignment. In order to account for margin you need to subtract the amount of margin from the width of the element.
.top_button{
float: left;
width: 33.333%;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

Answer 2

The current standard box-model behavior is what you described in your question. If you define a width it doesn't mean the element will only be as wide as the width-value. Instead padding, etc. get added to it.
To achieve the more intuitive behavior you need the an alternate box-model. Now if you define width you're really defininf the width with all possible paddings, borders and so on.
The following CSS is exactly what you need for this. Note that this CSS will enable the alternate box model for all elements. You may also just define them for your needed elements, although you than have to mess with two different approaches in one project.
*, ::before, ::after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

Answer 3

If you run into cross-browser compatability problems with box-sizing, here's an alternative. It requires an additional "inner" div for each button, to which you can apply your margins.
HTML:
<div class="top_button">
<div class="top_button_contents">
<a href="#">
<img src="img/image2.png" /> some button text for testing
</a>
</div>
</div>
CSS:
.top_button {
float: left;
width: 33.333%;
}
.top_button .top_button_contents {
position:relative;
margin:0px 10px 0px 0px;
background-color:#CCC;
}
.top_button.last .top_button_contents {
margin:0px;
}
Here is a jFiddle.