Question

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>

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.

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