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