100% Width Floating Div

[danbopes]

Here is my predicament:

 

I have some text, followed by a 1px line with a left and right border to make it "fade-out" so to say.  All I need is the line to fill up whatever space is left in the line.

 

I can't do:

<div style="float: left; width: 100px">iO Links</div><div style="float: left; width: 400px" class="bar"></div>

Because I don't know if the bar is always going to be 400px (Because "iO Links" might be some other text like "iO HTML Help", which wouldn't fit in 100px).  Whenever I do 100% for the bar, it will automatically drop to the next line.  So I am not exactly sure what to do.  If you have any questions, feel free, as I can clarify.

[rhodesa]

get rid of the DIV for the bar. instead, make it a background on the box. then, on the title, do a background of black to hide the first part of the line:

 

<div style="background: #000 url(bar.gif) repeat-x top left; padding: 10px;">
  <div style="float: left; background: #000; padding-right: 10px;">IO Links</div>
  <div style="clear: left; padding: 5px;">Some links that we ... us feedback</div>
</div>

[danbopes]

That will result in:

###Text###Bar################End Pixel

 

But it has no Start Left Pixel to fade into the bar.

 

I need ###Text##Start Pixel#Bar##############End Pixel

[rhodesa]

in that case...i can't think of a way without using tables

[danbopes]

I tried using tables too!  That didn't work either.  When I made:

<tr><td>iO Links</td><td width="100%">Bar stuff</td>, it put iO on one line, and Links one line down.  I am still baffled.

[rhodesa]

<style type="text/css">
  .pima {
    width: 300px;
    color: #FFF;
    padding: 5px;
    background: #000;
    color: #FFF;
    font-family: sans-serif;
    font-size: 0.7em;
  }
  .pima table {
    width: 100%;
    color: #FFF;
    font-size: 1.2em;
  }
  .pima td.pimaTitle {
    width: 1%;
    white-space: nowrap;
    padding-right: 5px;
  }
  .pima .pimaBody {
    padding: 5px;
  }
  
</style>
<div class="pima">
  <table cellspacing=0 cellpadding=0>
    <tr>
      <td class="pimaTitle">iO Links</td>
      <td>[bar code here]</td>
    </tr>
  </table>
  <div class="pimaBody">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque commodo. Sed ut quam eu dui mattis volutpat. Nam convallis, urna a eleifend gravida, augue magna fringilla.</div>
</div>