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

Thanks for all of your help. The display:table did the trick. Here's a sample http://jsfiddle.net/idpexec/QKSzC/

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

    <style>
    .container-wrapper
    {
         width: 500px;
         height: 60px;
         border: 1px solid green;
         margin-bottom: 50px;
    }

    .container
    {
        display:table;
        width:100%;
    }

    .left,
    .inside-separator-wrapper
    {
        display:table-cell;
    }

    .left
    {
        border: 1px solid red;
        white-space: nowrap;
        padding: 0 15px;
    }

    .inside-separator-wrapper
    {
      width: 100%;
      position: relative;
    }

    .inside-separator
    {
      background: transparent url('http://test.2wsx.ws/inside_separator.png') no-repeat center center;
      height: 7px;
      position: relative;
      top: 0px;
      left: 0px;
      padding: 0;
      width: 100%;
    }

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

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

    .inside-separator-right
    {
      float: right;
      right: 0;
    }
    ​<style>

Answer 2

 <div class="left"><div class="line">11111111111111111</div> This is LEFT</div>

Put the .line inside the .left and float .line right

http://jsfiddle.net/Hk7GR/1/

Answer 3

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; }