How to get a floating div fill the remaining portion of it's wrapper div

[Darkmatter5]

I have a wrapper div that encompasses 2 other divs.  Below is the css for the divs

 

#content_wrap {
    position: relative;
}
#content {
    position: absolute;
    top: 0;
    left: 0;
}
#right_menu {
    position: absolute;
    top: 0;
    right: 0;
    width: 200px;
    height: 600px;
}

 

Content_wrap encompasses Content and Right_menu.  The problem is content only fills to the size of the contents it contains.  How can I force it to fill the width to the edge of the Right_menu div?

[haku]

Add more content?

 

You are probably going to have to explain your problem better.

[Darkmatter5]

Here's an example of the html code

 

<div id="content_wrap">
  <div id="content">
    <table width="100%"><tr><td>test</td></tr></table>
  </div>
  <div id="right_menu">
    <table width="100%"><tr><td>test</td></tr></table>
  </div>
</div>

 

If I do something similar to this the table in "content" doesn't fill all the way to the edge of the "right_menu" div, it'll just be large enough to accommodate the contents of the table.  I'm wanting to make the "content" div and the table in that div to fill 100% to the left edge of the "right_menu" div.

[haku]

Why are you even using tables for that?

[Darkmatter5]

You mean why not just use more divs and use min-width or something?  I personally like tables to organize content, but I like divs to make "containment" areas to hold my content on my sites.  Is that bad practice?

[haku]

Yes, it is. Tables should only be used for tabular content - i.e. something that is cross-referencing data types.