How to resize div properly when browser resizes?

Question

Assume I have the following table:

<div style="padding:10px">
<table style="width:100%">
<tr><td style="width:10%">Jordan Roger</td><td style="width:100%"><div width="200px" style="background:red"></div></td></tr>
</table>
</div>

How can I make it with javascript such that that 200px div will always fill the space up to the right side of the screen (honoring the 10px padding) whenever the browser is resized? (height can stay the same, width is priority.

Note: Percentages are not an option for the div. Usually I would use a percentage like 100%, however this is not an option as I can only set the div's width to a specific value in px, not percentage with a "thediv.setSize(width, height)".

If possible I was thinking about the following as a potential means of doing this, but do not know how to properly utilize it as the 200px div is not going to be taking up the whole height and width of the browser as it is located in a table.

$(window).resize(function() 
{    
    mydiv.setSize($(document).width(), $(document).height()));   
});

If there is some "right" way I should be using this...

Answer 1

You'll have to use a width percentage - ie a "relative" width.

---

Edited to reflect changed requirements.

Why not set the style with JS like here? How to set width of a div in percent in JavaScript?

Alternatively, you might be able to bind a listener to: http://api.jquery.com/resize/ , that checks the width of the page, and calls that setSize function