title: CSS fluid columns, fixed margins; the holy grail of holy grails
body: <h2>Update &amp; Summary</h2>
  
  <p>I feel obligated to make this question clearer, now that there is a bounty attached.</p>
  
  <p>(<em>Also, I'm pretty sure this will be child's play when the <code>calc()</code> CSS3 unit value is supported, doing something like <code>width: calc(25% - 5px)</code>; though we'll probably be browsing the internet in our minds by that point</em>)</p>
  
  <p>I'm working on a CSS framework for a few projects that share design requirements; namely a fluid 12 column layout. Using floated <code>.column</code> elements with percentage widths of <code>(100% / 12) x col_size</code>, this is reasonably easy. However, the issue comes with the addition of fixed margins (<em>or any form of spacing</em>) between columns.</p>
  
  <p>My initial attempt used the fluid columns as described, with a <code>.panel</code> child nested in each. HTML/CSS snippet follows (<em>reduced for brevity</em>):</p>
  
  <pre class="lang-css prettyprint-override"><code>.column{
      float: left;
      display: inline-block;
  }
  
  .width-01{ width:  8.3333%; }
  .width-02{ width: 16.6666%; }
  .width-03{ width:      25%; }
  /* etc */
  
  .panel{
      width: 100%;
      padding: 5px;
      box-sizing: border-box; /* so padding doesn't increase width */
  }
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="column width-02"&gt;
      &lt;div class="panel"&gt;Width-02&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="column width-03"&gt;
      &lt;div class="panel"&gt;Width-03&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="column width-02"&gt;
      &lt;div class="panel"&gt;Width-02&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="column width-05"&gt;
      &lt;div class="panel"&gt;Width-05&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This snippet would produce a layout similar to that of the image below, however all <code>.panel</code> elements have <code>5px</code> padding on all sides. <strong>I'm trying to make the content edge of the outside columns flush with the edge of the view-port (<em>or parent container for that matter</em>)</strong>. Another approach would be to eliminate the <code>.panel</code> class altogether, and just go with columns:</p>
  
  <pre class="lang-css prettyprint-override"><code>.column{
      float: left;
      display: inline-block;
      padding-left: 10px;
      box-sizing: border-box;
  }
  
  .column:first-child{ padding-left: 0px; }
  
  .width-01{ width:  8.3333%; }
  .width-02{ width: 16.6666%; }
  .width-03{ width:      25%; }
  /* etc */
  </code></pre>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div class="column width-02"&gt;Width-02&lt;/div&gt;
  &lt;div class="column width-03"&gt;Width-03&lt;/div&gt;
  &lt;div class="column width-02"&gt;Width-02&lt;/div&gt;
  &lt;div class="column width-05"&gt;Width-05&lt;/div&gt;
  </code></pre>
  
  <p><strong>Again, this works well, producing results even closer to that of the image below, however now the (<em>actual</em>) problem is that the padding is eating into the width of the columns screwing up the width distribution. The <code>:first-child</code> column has 10 pixels (<em>or whatever the margin size is</em>) greater content area width than it's siblings.</strong></p>
  
  <p>This may seem innocuous, even unnoticeable; however there are a few instances where having <strong>exact</strong> (<em>as exact as possible</em>) width distribution between elements is either necessary, or would make things altogether easier.</p>
  
  <p>And so, <strong>whether using padding, margin, or some combination thereof; is there any solution for fluid columns, fixed margins, with <em>even distribution</em> of gutter space that won't rob "marginal" (***haha*</strong>) content area from the adjacent columns?**</p>
  
  <hr>
  
  <h2>Original Question</h2>
  
  <p>Due to the simple lack of results in my searches and attempts, I've concluded this is impossible. If anywhere can yield an answer though, I'm certain it is here.</p>
  
  <p><strong>Is there any way, using pure CSS, to achieve a fluid width columned layout with fixed width margins?</strong>  </p>
  
  <p><strong><em>Important note</strong>: This figure is only an example, and not the specific layout I'm looking to achieve. A given solution should permit any combination of adjacent columns, the total width distribution totaling 12 or less. Consider the popular <a href="http://960.gs/" rel="nofollow noreferrer">960 grid</a> for reference.)</em></p>
  
  <p><img src="https://i.stack.imgur.com/fABSD.png" alt="super_awesome_layout.css"><br>
  <strong><em>Note</strong>: In a 12 column layout, the width distribution of the columns in the image are 2, 3, 2, and 5 respectively.</em></p>
  
  <p>So far, I've resorted to a grid that, using percentages, <em>nearly</em> accomplishes this. The problem is, in order to achieve the margins, each column requires an additional child (<em>I call them <code>.panel</code></em>) with:</p>
  
  <pre class="lang-css prettyprint-override"><code>width: 100%;
  box-sizing: border-box;
  padding: 10px;
  </code></pre>
  
  <p>This is, again <em>nearly</em>, fine; the issue is with this approach is that the first and last column have outer "margins" (<em><code>10px</code></em>) and the "margins" between each column are doubled (<em><code>2 x 10px</code></em>)</p>
  
  <p>Certainly, with the inclusion of the new CSS3 <code>calc()</code> value type, this could be solved much more easily. Something in the direction of:</p>
  
  <pre class="lang-css prettyprint-override"><code>.width-12 &gt; .panel{ width: 100%; }
  .width-09 &gt; .panel{
      width: calc(75% - 10px);
      margin: ...;
  }
  </code></pre>
  
  <p>I've got some Javascript fixes, I've hacked out some stuff that "works", but I'm on a quest. Hopefully the holiest of grails exists.</p>
  
  <p><em>The following solution, and the one @avall provided (although certainly a good choice on simplifying) unfortunately aren't what I'm looking for. The main issue being, the margins are not distributed evenly among columns.</em></p>
  
  <p>The only way I can see this working is reducing the <code>.panel</code> padding to <code>5px</code> and something like:</p>
  
  <pre class="lang-css prettyprint-override"><code>.column:first-child &gt; .panel {
      padding-left: 0px;
  }
  
  .column:last-child &gt; .panel {
      padding-right: 0px;
  }
  
  /* not necessary? in any case, haven't tested */
  .column:only-child &gt; .panel {
      padding-right: 0px;
      padding-left: 0px;
  }
  </code></pre>
  
  <p>This solution is not acceptable, only because IE8 fails to recognize the <code>:last-child</code> (<em>and for that matter <code>:only-child</code></em>) pseudo selectors.</p>