title: DIV stretch to height 100% in a table cell
body: <p>I have following layout:</p>
  
  <p>4 rounded corners background and two panels (left panel and right panel) inside it.</p>
  
  <p>Currently I implement the layout as follows:</p>
  
  <p>Table with 9 cells:</p>
  
  <pre>
  top left corner    |                  | top right corner
                     |left div right div|
  bottom left corner |                  | bottom right corner
  </pre>
  
  <p>Code:</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 id="content" width="100%" border="0" cellspacing="0" cellpadding="0"&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;img src="corner1.jpg" /&gt;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;img src="corner2.jpg" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &amp;nbsp;&lt;/td&gt;
              &lt;td valign="top" height="100%"&gt;
                  &lt;div id="menu" style="float: left; width: 235px; height: 445px; background-color: #660000"&gt;
                      Menu
                  &lt;/div&gt;
                  &lt;div id="mainContent" style="float: left; margin-left: 10px; height: 100%; background-color: #888888"&gt;
                      Main Content
                  &lt;/div&gt;
              &lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
          &lt;/tr&gt;
          &lt;tr&gt;
              &lt;td&gt;
                  &lt;img src="corner3.jpg" /&gt;&lt;/td&gt;
              &lt;td&gt;
              &lt;/td&gt;
              &lt;td&gt;
                  &lt;img src="corner4.jpg" /&gt;&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>What I want to ask is how I can stretch the height of the right div to <strong>100%</strong> so that it equals to the height of the td (height of left div will increase according to users' action).</p>
  
  <p>I have tried many ways and still cannot figure it out.Set height of div to <strong>100%</strong> does not work.</p>
  
  <p>What should I do to acheive this? Don't use table?</p>
  
  <p>PS: </p>
  
  <p>The code is changed. You can paste the code into the notepad and test it in <strong>IE</strong>.</p>
  
  <p>The code is edited again to add the <strong>DOCTYPE</strong>.</p>