title: How to make buttons stretch equally to fill container <div> (Act like a table row with cells)
body: <p>Let's say I have a container <code>&lt;div&gt;</code> with some buttons in:</p>
  
  <pre><code>&lt;div class="cont"&gt;
      &lt;div class="button"&gt;Button 1&lt;/div&gt;
      &lt;div class="button"&gt;Button 2&lt;/div&gt;
      &lt;div class="button"&gt;Button 3&lt;/div&gt;
      &lt;div class="button"&gt;Button 4&lt;/div&gt;
      &lt;div style="clear:both"&gt;&lt;/div&gt;
  &lt;/div&gt;​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
  </code></pre>
  
  <p>And assigned some CSS to this:</p>
  
  <pre><code>.cont{
      background:#0F0;
      width:400px;
      height:40px;
      line-height:40px;
  }
  .button{
      background:#F00;
      float:left;
      height:inherit;
      line-height:inherit;
  }
  </code></pre>
  
  <p>Background colours are just so that I can see what I am doing. I'm wondering if there is a JavaScript-free way to make all of the button <code>&lt;div&gt;</code>s stretch (with equal widths) to the parent <code>&lt;div&gt;</code> and I want them to automatically get the width using the parent <code>&lt;div&gt;</code>. So, yes I could just set the <code>.button</code> width to 25% because there are 4 of them but if I added more buttons I would want them to automatically get a new width.</p>
  
  <p>I hope I explained myself well enough, I did look around but couldn't find anything to suit this. Can I do this in CSS or is it a JS-job?</p>
  
  <p><a href="http://jsfiddle.net/zanjr/1/" rel="noreferrer">JSFiddle here.</a></p>
  
  <p>Thanks.</p>