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

The gap between would be variable, or width can't be always 33% (3x33% + 2x10px can be more/less then viewport).

Then the code is simple:

#wrapper {background: red;}
.inner {width: 33%; margin: 0 auto; background: green;}
.left {float: left;}
.right {float: right;}

  
inner left
  
inner right
  
inner middle

If width should be variable and the gap between divs always 10px, change width: 33% for width: calc((100% - 20px) / 3);.