title: Making DIV container fitting into parent TD
body: <p>I'm hardly trying to make a DIV container fitting and resizing according to the parent TD and not according to the content of the DIV.
  Here's what I want to achieve:</p>
  
  <ul>
  <li>The parent Table should always fit into screen, therefore the width is set to 100%</li>
  <li>The left column is fixed size to display the menu</li>
  <li>The right column (content) should resize according to browser width</li>
  <li>In the content TD, I use the DIV tag for scrolling the content table (overflow auto)</li>
  </ul>
  
  <p><strong>I've expected the DIV to scroll the content (horizontally) and resize its width upon the parent TD. But the DIV extends and the IE scrollbars are used instead of DIV scrollbars.</strong></p>
  
  <p>Here is what I've tried so far:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;body&gt;
      &lt;table border="1" width="100%"&gt;
          &lt;colgroup&gt;
              &lt;col width="200px" /&gt;
              &lt;col width="*" /&gt;
          &lt;/colgroup&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;div style="width:100px;"&gt;
                      Left header
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  right header
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  Menu
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;!-- this DIV should scroll! --&gt;
                  &lt;div style="overflow:auto; width:100%;"&gt;
                      &lt;table border="1" width="100%"&gt;
                          &lt;tr&gt;
                              &lt;td&gt;
                                  SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES
                              &lt;/td&gt;
                              &lt;td&gt;
                                  SOME_LONG_COLUMN_VALUES_SOME_LONG_COLUMN_VALUES
                              &lt;/td&gt;
                          &lt;/tr&gt;
                      &lt;/table&gt;
                  &lt;/div&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It might be possible to do so with a layout using DIV tags only. But due to the given master page layout and the asp:GridView, I cannot change that. 
  Also it should still work with old IE6.</p>
  
  <p>Can somebody help me please?</p>
  
  <h2>Update</h2>
  
  <p>Could solve the problem myself. If someone is interested, here's the solution:
  added the CSS style <code>table-layout:fixed;</code> to the root table.</p>