Fluid css floats - html

Question

I'm trying to create a fluid element for a site i'm working on, Check out this JS fiddle and make your browser a bit wider, you will see a grey line, a black box, and then a grey line.
When the browser's width is lower the right side line breaks down to the next line, but i want this to stay together no matter how wide the browser is. I generally use float's but have tried a few things, as you can see some css is commented out cause i'm playing with it.
Does anybody have some cool tricks to show me? Any help would be greatly appreciated! Let me know if you need any info.
http://jsfiddle.net/r8Xka/
CSS
header .lower{
overflow:hidden;
width:95%;
margin:40px auto 0 auto;
}
header .lower .line{
/*float:left;*/
display:inline-block;
background:#eaebeb;
width:35%;
height:8px;
/*display:block;*/
position:relative;
top:18px;
}
header .lower a{
/*float:left;*/
display:inline-block;
margin:0 20px;
/*display:block;*/
background: #000;
width: 141px;
height: 42px;
}
HTML
<header data-behavior="randomHeader">
<div class="lower">
<div class="line"></div>
Play Video
<div class="line"></div>
</div>
</header>

Answer 1

You have 3 column: left - fluid, middle - fixed, right - fluid. You would need some js to make it work.
Or some html/css trick like this:
<header data-behavior="randomHeader">
<div class="lower">
<div class="line"></div>
<div class="center">
Play Video
</div>
</div>
</header>
Css:
header .lower{
width:95%;
margin:40px auto 0 auto;
position: relative;
}
header .lower .line{
background:#eaebeb;
height:8px;
}
.center{
text-align: center;
position: absolute;
top: -20px;
left: 0;
width: 100%;
}
header .lower a{
border: 10px solid #FFF;
display:inline-block;
background: #000;
width: 141px;
height: 42px;
}
See working fiddle