How to make a DIV adapt it's width and height automated?

I want to label 3 DIVs, then I write the following code, but it doesn't work:

<table>
<tr>
  <td>
    <tr><div id="leftUpDiv" style="width:开发者_JAVA百科20%;height:50%;border:1px solid gray"></div></tr>
    <tr><div id="leftDownDiv" style="width:20%;height:50%;border:1px solid gray"></div></tr>
  </td>
  <td>
    <div id="rightDiv" style="width:80%;height:100%;border:1px solid gray"></div>
  </td>
</tr>
</table>

But if I change the percentages into numbers (20% -> 200; 50% -> 500; 80% -> 800; 100% -> 1000), it works.

My question is: How to change the code, so the Divs can labeled with the above percentages?

div's will by default use 100% width, and 100% height of whatever content is in there. If nothing in there, then height of 100% = 0px. Also should fix your formatting of your table. It shouldn't even work that way.

CSS:

td{
border:1px solid red;
}

HTML:

<table>
<tr>
    <td><div id="leftUpDiv"></div></td>
    <td><div id="leftDownDiv"></div></td>
</tr>
<tr>
  <td colspan="2">
    <div id="rightDiv"></div>
  </td>
</tr>
</table>