Question

I’m trying to create a dynamic popup window that is able to be re-sized. However, since I’m not able to use static widths, I’m running into issues with using floats and percentages for the widths.

When I specify a percentage for the width of a floating div, it assumes I mean the 100% of the width of the containing div. What I’m trying to do, is set the width to the remainder of the width in the current div. If I use a table, it will work. So essentially, I need to be able to take the following code for a table and make it work using a div…

<table style='width: 100px;' cellpadding='0' cellspacing='0'>    <tr style='height: 25px;'>       <td style='width: 10px; background-color: Red;'></td>       <td style='background-color: Blue;'></td>       <td style='width: 10px; background-color: Black;'></td>    </tr> </table> 

Shows the following:

I have the following so far, but it does not work as intended…

<div id='container' style='width: 100px; height: 25px;'>    <div id='left' style='float: left; width: 10px; background-color: Red; height: 100%;'></div>    <div id='mid' style='float: left; background-color: Blue; height: 100%;'></div>    <div id='right' style='float: right; width: 10px; background-color: Black; height: 100%;'></div> </div> 

Code above shows the following:

Anyway, if someone could help me translate the table method into something that will work with a div, I would grately appreciate it.

Thanks,
C

Note:

I tried adding the code into the actual post, but it appears that the post is not interpreting the html. Therefore the sections where it says ‘shows the following’, don’t actually do that.

Answer 1

You could try something like this:

<div style='width:100px;height:25px;position:relative'>   <div style='width:20px;height:100%;position:absolute;background:red'>&nbsp;</div>   <div style='width:20px;height:100%;position:absolute;right:0;background:black'>&nbsp;</div>   <div style='height:100%;background:blue;padding:0 20px'>     Stuff   </div> </div>