title: 3 columns - center column fluid with an overflow element
body: <p>I have a three column website. Outer columns are fixed, middle column is fluid.
  I implemented this with </p>
  
  <pre><code>&lt;div style="display:table"&gt;
      &lt;div style="display:table-row"&gt;
          &lt;div style="display:table-cell"&gt;
          &lt;/div&gt;
          &lt;div style="display:table-cell"&gt;
          &lt;/div&gt;
          &lt;div style="display:table-cell"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(see jsfiddle for complete code)</p>
  
  <p>Now I have in the middle column an element that can become too wide.
  I hide this with an </p>
  
  <pre><code>overflow:auto
  </code></pre>
  
  <p>so there will be scrollbars.</p>
  
  <p><strong>EDIT:</strong><br/>
  doesn't work sorry: <a href="http://jsfiddle.net/WtWCC/" rel="nofollow">http://jsfiddle.net/WtWCC/</a><br/>
  does work:          <a href="http://jsfiddle.net/WtWCC/2/" rel="nofollow">http://jsfiddle.net/WtWCC/2/</a></p>
  
  <p>Description for Chrome:<br/>
  In the example provided click on the "+" till the scrollbar appears (the more you click the more clearly the problem) . The view with the scrollbar is what I like:  2 fixed columns visible, with the middle column maximized.</p>
  
  <p>Now resize the browser. (or the jsfiddle pane)</p>
  
  <p>The problem now is that the middle column becomes much bigger. An the right column get's hidden. </p>
  
  <p>Anybody knows a solution to this problem?  </p>
  
  <p>Thanks in advance.</p>
  
  <p>EDIT: The described behaviour is in Chrome.
  In IE and Firefox the Overflow:auto doesn't work at all.</p>