Jump to content

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


Darkmatter5

Recommended Posts

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?

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.

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?

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.