HTML Fluid Columns

Question

Let me preface this by saying I feel like a moron. I have a fairly simple scenario that I can't figure out.

This is a sample of what my code looks like:

<div id="container-wrapper">  
  <div id="container">
    <div class="left">This is LEFT</div>
    <div class="line"></div>
  </div>
</div>

Let's say #container-wrapper is a fixed width such as 960px. #container has its width set to 100%. I don't know the width of .left because the text inside is dynamic. It's floated left. .line has a background image that is essentially a line which will repeat to fill the width of the div. I want to float it next to .left so it looks something like this:

This is LEFT ---------------------------------------------------------

If I set the width of .line to 100% it will trying to fill the entire container width so the question is how do I get it to fluidly adjust to the space that is left over from .left.

Hope I'm being clear.

Thanks, Howie

Here's a sample of the real code I'm using. .line is really .inside-separator.

<div id="container-wrapper">  
  <div id="container">
     <div class="left">This is LEFT</div>    
     <div class="inside-separator"><span class="inside-separator-left">&nbsp;</span><span class="inside-separator-right">&nbsp;</span></div>
  </div>
</div>

.inside-separator
{
  background: transparent url('../images/inside_separator.png') no-repeat center center;
  margin: 0;
  padding: 0;
  height: 7px;
  width: something?;
}

.inside-separator-left,
.inside-separator-right
{
  display: block;
  position: absolute;
  width: 8px;
  height: 7px;
  background: transparent url('../images/inside_plus.png') no-repeat 0px 0px;
}

.inside-separator-left
{
  float: left;
  left: 0;
}

.inside-separator-right
{
  float: right;
  right: 0;
}

Answer 1

I'm not sure this is possible using floats. But if you're ok using display:table instead of floating .left then it's easier.

div#container { display:table; width:100%; }
div.left, div.line { display:table-cell; }