HTML Fluid Columns - html

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"> </span><span class="inside-separator-right"> </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; }

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

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"> </span>
<span class="inside-separator-right"> </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>