title: Display:Table-Cell width issues
body: <p>I have set fixed pixel width values for a three column layout, and want to use <code>display:table-cell</code> properties so that the columns will always snap to the height of the column div with the largest content.</p>
  
  <p>I have used this technique before no problem, but I now can't seem to get the column width to fix, and instead, if the content in a div increases it makes the div wider instead of taller, at the same time this compresses the width of the adjacent cells. Obviously the whole point I'm using table-cell is to stop this happening, can anyone see what is stopping the column widths working? In the JSFiddle the widths initially look correct but if you add extra text into any of the columns you will see that it doesn't respond as I need it to.</p>
  
  <p><a href="http://jsfiddle.net/sa3jefyg/" rel="nofollow">JSFiddle here</a></p>
  
  <p>The html/css below are as per the JSFiddle above:</p>
  
  <pre><code>&lt;div class="container"&gt;
  &lt;div class="fwcol"&gt;
      &lt;div class="col"&gt;
          &lt;div class="thirds"&gt;COLUMN1&lt;/div&gt;
          &lt;div class="thirdm"&gt;COLUMN2&lt;/div&gt;
          &lt;div class="thirds"&gt;COLUMN3&lt;/div&gt;
      &lt;/div&gt;&lt;!--col--&gt;
  &lt;/div&gt;&lt;!--fwcol--&gt;
  &lt;/div&gt;&lt;!--container--&gt;
  
  .container {
      margin: 0 auto;
      width: 966px;
      background:red;
      overflow:hidden;
  }
  .fwcol {
      float: left;
      width: 966px;
  }
  .col {
      width:966px;
      display:table;
      border-collapse:separate;
      border-spacing:20px;
  }
  .thirds, .thirdm {
      display: table-cell;
      padding: 20px;
      background: #FFF;
  }
  .thirds {
      width: 255px;
  }
  .thirdm {
      width: 256px;
  }
  </code></pre>