title: Is there a way to have a specific spacing between and take up the full width in a responsive design?
body: <p>So I have three divs and I would like all three of them to take up the full width of their container and have a specific margin between them.</p>
  
  <pre><code>&lt;div class="container"&gt;
      &lt;div class="foo"&gt;
          content
      &lt;/div&gt;
      &lt;div class="foo"&gt;
          bit more content
      &lt;/div&gt;
      &lt;div class="foo&gt;
          Very much more content
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And my CSS looks something like:</p>
  
  <pre><code>.foo { 
     width: 31%; 
     margin-left: 10px;
  }
  .foo:first-child { 
     margin-left: 0px;
  }
  </code></pre>
  
  <p>However, with this set up the divs will wrap when the page gets too small and the divs will not stretch to the edge when the page is too big.</p>
  
  <p>Is there an easy way to have a CONSTANT margin between them (no 'margin-left: 3%') yet still have the three divs stretch evenly across no matter the size of the page?</p>
  
  <p><strong>EDIT</strong>
  From the first answer, I took the idea of putting the padding inside of the div making it accounted for as part of the width and modified it a bit to use css that is more fully supported across all browsers.</p>
  
  <p>So as long as the container of the three divs remains greater than 120px, the spacing between the divs in this example will always be a constant 16px. Also, no matter the size of the outer container, the inside divs will always take up the entire width of the three containers.</p>
  
  <p>Example: <a href="http://jsfiddle.net/U8U7D/5/" rel="nofollow">http://jsfiddle.net/U8U7D/5/</a></p>