title: div's height fit container div's height with auto-scroll
body: <p>I got a problem with CSS styling of a page.
  Basically I have a div that will be used as a dialog in which I'd like to organize the content in 2 columns: the first one could contain a long list of elements, and should be scrollable, the second one should be small and in a fixed position. Thus I don't want all the dialog content to be crollable but just the half of it.
  I put toghether an example <a href="http://jsfiddle.net/Zw8WK/1/" rel="nofollow">here on jsfiddle</a> in case you need to do some try... the code is:</p>
  
  <p>CSS</p>
  
  <pre><code>#container {
  border: 1px solid black;
  height: 200px;
  }
  #main {
      display: table;
      border: 1px dashed blue;
      height: 200px;
  }
  #row{
      display: table-row;
      height: 200px;
  }
  #leftPanel{
      display: table-cell;
      width: 50%;
      height: 200px;
      overflow: auto;
      border: 1px dotted red;
  }
  #rightPanel{
      display: table-cell;
      width: 50%;
      vertical-align: top;
      height: 200px;
  }
  </code></pre>
  
  <p>HTML</p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="main"&gt;
          &lt;div id="row"&gt;
              &lt;div id="leftPanel"&gt; &lt;!-- This one should be scrollable --&gt;
                  &lt;!-- Long list of element here--&gt;
              &lt;/div&gt;
              &lt;div id="rightPanel"&gt;
                  &lt;div style="height: 50px;"&gt;
                      Something here
                  &lt;/div&gt;
                  &lt;div style="height: 50px;"&gt;
                      Something else here
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;​​​​​​​​​​​​​​​​​​​
  </code></pre>
  
  <p>How can I get leftPanel to be scrollable?
  As you can see I tried even setting a fixed height of every component of the CSS table, but without any result... what's wrong here? </p>