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

i want label 3 divs, write following code, doesn't work:

<table> <tr>   <td>     <tr><div id="leftupdiv" style="width: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 change percentages numbers (20% -> 200; 50% -> 500; 80% -> 800; 100% -> 1000), works.

my question is: how change code, divs can labeled above percentages?

div's default use 100% width, , 100% height of whatever content in there. if nothing in there, height of 100% = 0px. should fix formatting of table. shouldn't work 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>