0

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...

Rolando
  • 58,640
  • 98
  • 266
  • 407
  • Why aren't percentages an option? – jchapa Feb 28 '13 at 06:19
  • Percentages are not an option as a certain plugin I am using that uses a div requires manual specification of the width and height of the div you use. When you resize, there is a setSize function that allows you to manually specify the width and height to change it. But you cant just say setSize("100%", "100%"). So the pixels when the user resizes has to be computed somehow if possible. – Rolando Feb 28 '13 at 06:23
  • Updated question with potential solution – jchapa Feb 28 '13 at 06:27

1 Answers1

0

You'll have to use a width percentage - i.e. 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

Community
  • 1
  • 1
jchapa
  • 3,876
  • 2
  • 25
  • 38
  • Yes, that is what I've attempted to use, though it seems to always mess up. Its the "what would I put into that setsize function, that is stumping me". Is there something I need to do to get the td container width to figure out what to actually put for the setSize function? Or is there some other algorithm to figure out what would go into the setSize? That is the crux of the question. – Rolando Feb 28 '13 at 06:33