Trouble With CSS Floats

Question

Hey All,

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>

Answer 2

You can accomplish the task with floats and no absolute positioning.

<div id="container" style="display: block; width: 700px; height: 100px;">
    <div id="left" style="display: block; float: left; width: 10px; background-color: Red; height: 100%;">Div 1</div>
    <div id="mid" style="display: block; width: 90%; float: left; background-color: Blue; height: 100%;">Div 2</div>
    <div id="right" style="display: block; float: left; width: 10px; background-color: Green; height: 100%;">Div 3</div>
</div>

What you were missing is the display: block tag which makes div's act like block level elements which will float how you specified. Also, since you can't take up 100% of the parent block, I used 90% and it produced working results under Firefox not sure about IE or Opera.

The preview shows the Div 1, Div 2, Div 3 but when posted it did not

Edit: added working code.

Answer 3

By default divs are block level elements so you don't need to specify "display: block;".