Three divs side by side with spacing in between

Question

I\'m trying to have three of divs side by side with spacing in between the div\'s in the middle.

Here is the image of what I need:

Here is my current code:<

Answer 1

Here's a plunker I made with the solution you're looking for. The code that makes it work is below. I'm sure there might be an easier solution with flexbox, but this works with older browsers that don't support flexbox (looking at you, IE <= 9). Notice how I included the comments between the .box elements. This is because without them the whitespace is included when doing the inline-block width calculations and the last element ends up wrapping to the next line. Hopefully this helps!

.box {
    width:calc(33.3333333% - 10px);
    display:inline-block;
    background:#777;
    margin:0 10px;
    text-align:center;
  }

  .box:first-child, .box:last-child {
    margin:0;
    width:calc(33.333333% - 5px);
  }