Question

I want to position, in a page, a bar like this:

[corner-l][variable][ornament][variable][corner-r]

the “variable” spacer parts should be resizable, but ultimately, the surrounding container (containing all of this) should dictate the maximum width, and the setup described above should stretch the two spacers equally (without having to state an explicit width for the spacers), leaving the “ornament” in the center.

All parts are of perfectly equal height of 260 px. All of these divs contain the image as a background-image. the “variable” part contains a 1px wide fiber of the bar (again, as a background-image, with repeat-x set).

Can I do this, and perhaps support the major browsers? What’s the best way to do it?

Answer 1

Can I do this, and perhaps support the
major browsers?

My answer will work in all modern/major browsers, with the exception of IE7. I’m not sure whether you’d consider that a major browser; it’s borderline nowadays.

See: http://jsfiddle.net/PyTAD/ (and resize your browser to test the fluidity)

CSS:

.barContainer {
    border: 2px dashed #000;
    width: 100%;
    display: table;
    table-layout: fixed
}
.barContainer > div {
    outline: 1px dashed #00f;
    display: table-cell;
    height: 260px
}
.corner-l, .corner-r {
    width: 50px;
    background: #ccc
}
.variable {
    background: #999
}
.ornament {
    background: #f0f;
    width: 100px
}

HTML:

<div class="barContainer">
    <div class="corner-l">1</div>
    <div class="variable">2</div>
    <div class="ornament">3</div>
    <div class="variable">4</div>
    <div class="corner-r">5</div>
</div>