title: Calculating width as percentage minus margin with LESS CSS
body: <p>I use the Twitter Bootstrap grid system in my CMS app.</p>
  
  <p>When users built a page, they can add any number of columns to a row. Consider this row:</p>
  
  <pre><code>&lt;div class="span9 row"&gt;
      &lt;div class="span5"&gt;span5&lt;/div&gt;
      &lt;div class="span4"&gt;span4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>What I want to do, is add a feature where users can set a row to equally distribute its width among the columns within.</p>
  
  <p>So the <code>span5</code> and <code>span4</code> classes will be overridden. This would essentially behave like a table row, but I think it's hacky to make the row <code>display: table-row</code>, and it would probably ruin the responsive features of the TwBootstrap grid.</p>
  
  <p>What I would like to avoid, is to define each combination of width as such:</p>
  
  <pre><code>&lt;div class="span9 row shared child-count-2"&gt;
      &lt;div class="span5"&gt;span5&lt;/div&gt;
      &lt;div class="span4"&gt;span4&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>And in CSS:</p>
  
  <pre><code>.row.span9.shared.child-count-2 &gt; div {
      width: 340px;
  }
  </code></pre>
  
  <p>Since I'm already using LESS for CSS, I thought there might be a handy calculation that can make this work.</p>
  
  <p>The problem is that specifying 50% width doesn't take into account the <code>20px</code> of <code>margin-left</code>. So I need to take the width of the row, minus 20px for each column. And then divide the remaining width with the number of columns.</p>
  
  <p>Also, I would like to avoid using JavaScript. I don't like rendering 99% of a view, and then doing adjustments in script. If script execution gets a tiny delay users will see the layout flickering around. Not good.</p>
  
  <p><strong>So, is there any way to do this from LESS/CSS?</strong></p>