[html] Put spacing between divs in a horizontal row?

I have 4 divs in a horizontal row. I want to put space between the divs (using margin, I guess?), but the divs overflow their parent container when I do that.

With zero margin, they line up nicely on one line:

<div style="width:100%; height: 200px; background-color: grey;">_x000D_
  <div style="width: 25%; float:left; margin: 0px; background-color: red;">A</div>_x000D_
  <div style="width: 25%; float:left; margin: 0px; background-color: orange;">B</div>_x000D_
  <div style="width: 25%; float:left; margin: 0px; background-color: green;">C</div>_x000D_
  <div style="width: 25%; float:left; margin: 0px; background-color: blue;">D</div>_x000D_
</div>

Now when I introduce a margin of 5px, the last button wraps:

<div style="width:100%; height: 200px; background-color: grey;">_x000D_
  <div style="width: 25%; float:left; margin: 5px; background-color: red;">A</div>_x000D_
  <div style="width: 25%; float:left; margin: 5px; background-color: orange;">B</div>_x000D_
  <div style="width: 25%; float:left; margin: 5px; background-color: green;">C</div>_x000D_
  <div style="width: 25%; float:left; margin: 5px; background-color: blue;">D</div>_x000D_
</div>

I guess this is because the width attribute, when a percentage, doesn't take the margin into account for the element's total width? What's the right way to do this?

Thanks

Quite a few ways to apprach this problem.

Use the box-sizing css3 property and simulate the margins with borders.

http://jsfiddle.net/Z7mFr/1/

div.inside {
 width: 25%;
 float:left;
 border-right: 5px solid grey;
 background-color: blue;
 box-sizing:border-box;
 -moz-box-sizing:border-box; /* Firefox */
 -webkit-box-sizing:border-box; /* Safari */
}

<div style="width:100%; height: 200px; background-color: grey;">
 <div class="inside">A</div>
 <div class="inside">B</div>
 <div class="inside">C</div>
 <div class="inside">D</div>
</div>

Reduce the percentage of your elements widths and add some margin-right.

http://jsfiddle.net/mJfz3/

.outer {
 width:100%;
 background:#999;
 overflow:auto;
}

.inside {
 float:left;
 width:24%;
 margin-right:1%;
 background:#333;
}

You can set left margins for li tags in percents and set the same negative left margin on parent:

ul {margin-left:-5%;}_x000D_
li {width:20%;margin-left:5%;float:left;}

<ul>_x000D_
  <li>A_x000D_
  <li>B_x000D_
  <li>C_x000D_
  <li>D_x000D_
</ul>

http://jsfiddle.net/UZHbS/

Put all the divs in a individual table cells and set the table style to padding: 5px;.

E.g.

<table style="width: 100%; padding: 5px;">_x000D_
<tbody>_x000D_
<tr>_x000D_
<td>_x000D_
<div style="background-color: red;">A</div>_x000D_
</td>_x000D_
<td>_x000D_
<div style="background-color: orange;">B</div>_x000D_
</td>_x000D_
<td>_x000D_
<div style="background-color: green;">C</div>_x000D_
</td>_x000D_
<td>_x000D_
<div style="background-color: blue;">D</div>_x000D_
</td>_x000D_
</tr>_x000D_
</tbody>_x000D_
</table>

This is because width when provided a % doesn't account for padding/margins. You will need to reduce the amount to possibly 24% or 24.5%. Once this is done you should be good, but you will need to provide different options based on the screen size if you want this to always work correct since you have a hardcoded margin, but a relative size.

Another idea: Compensate for your margin on the opposite side of the div.

For the side with the spacing you are looking to achieve as an example: 10px, and for the opposing side, compensate with a -10px. It works for me. This likely won't work in all scenarios, but depending on your layout and spacing of other elements, it might work great.

I would suggest making the divs a little smaller and adding a margin of a percentage.

<div style="width:100%; height: 200px; background-color: grey;">_x000D_
  <div style="width: 23%; float:left; margin: 1%; background-color: red;">A</div>_x000D_
  <div style="width: 23%; float:left; margin: 1%; background-color: orange;">B</div>_x000D_
  <div style="width: 23%; float:left; margin: 1%; background-color: green;">C</div>_x000D_
  <div style="width: 23%; float:left; margin: 1%; background-color: blue;">D</div>_x000D_
</div>

http://jsfiddle.net/YJT7q/