Aligning three SPAN/DIV tags - fixed left, fixed right, fill middle

Question

Ok, this is driving me nuts!!

I want three div or span tags in a line. Left = a 57px width image; Right = a 57px image; Centre = A span image to fill the whole width.

<div class="bar-left"></div>
<div class="bar-span"></div>
<div class="bar-right"></div>

Basically I'm drawing a fancy hr line where each end fades out. I can get the left and right images aligned using float: left; and float: right; but the middle seems impossible.

Any ideas?

Answer 1

Would this be ok?

JSFiddle

The idea is to put left and right column on top and float them, then put margin to the content div so it doesn't wrap under floated ones...

<div class="bar-left"></div>
<div class="bar-right"></div>
<!- content goes in last -->
<div class="bar-span"></div>

CSS:

.bar-left
{
    float: left;
    width: 57px;
}

.bar-right
{
    float:right;
    width: 57px;
}

.bar-span
{
    margin: 0 70px;
}