Question

I am trying to make a decorative heading with horizontal lines either side, similar to http://www.impressivewebs.com/centered-heading-horizontal-line/ but with the following constraints:

• Support arbitrary header text
• Fluid – stretches to fit the width of the page
• The horizontal lines are images – each line is comprised of a decorative “tip” image, and then a repeating section which should stretch as far as needed to fill the page width
• The decorative tip images are fixed widths (297px each)
• Solution must work with background image on web page
• As the page width shrinks, the repeating sections of the images get smaller and eventually disappear. The heading text in the middle then wraps onto multiple lines, if necessary.

I am trying to use CSS only for the solution, although I would consider JavaScript help if it cannot be done with pure CSS.

I have seen a few similar questions on SO, but I don’t think that any of the solutions would do quite what I’m looking for.

Here is my own naive attempt (also at http://jsfiddle.net/39qLr/1/). For simplicity I have coloured the “tip” images in red, and the flexible repeating images in yellow. The obvious problem is that the yellow parts are not showing up right now!

HTML:

<div class="heading-container">
    <div class="left-tip"></div>
    <div class="left-filler"></div>
    <h1>Heading Text</h1>
    <div class="right-filler"></div>
    <div class="right-tip"></div>
</div>

CSS:

.heading-container {
    display: table;
    width: 100%;
}

.left-tip, .right-tip {
    background-color: red;
    width: 297px;
    display: table-cell;
}

.left-filler, .right-filler {
    background-color: yellow;
    display: table-cell;
}

h1 {
    text-align: center;
    display: table-cell;
}

I am very grateful for any guidance!

Answer 1

With help from a colleague, we have managed to get as close as we think is possible:

http://jsfiddle.net/rbCvq/

HTML (same as before):

<div class="heading-container">
    <div class="cell left-tip">&nbsp;</div>
    <div class="cell left-filler">&nbsp;</div>
    <h1 class="cell heading-text">Heading Text</h1>
    <div class="cell right-filler">&nbsp;</div>
    <div class="cell right-tip">&nbsp;</div>
</div>

CSS:

.heading-container {
    display: table;
    width: 100%;
}

.cell
{
    display: table-cell;
}

.left-tip, .right-tip {
  width: 297px;
  background: red;
}

.left-filler, .right-filler {
  background: yellow;
}

.heading-text {
  width: 1px;
  white-space: nowrap;
}

The secret sauce that makes it work seems to be:

• the 1px width on the heading element
• adding the white-space: nowrap
• the nbsp; in the empty DIVs

Of course this doesn’t fulfil my original criteria of making the text wrap onto multiple lines, but I think the overall effect works about as well as we could hope. Also, the markup is a bit heavy on the DIVs, which serve no semantic purpose.

Thank you for all the suggestions, and I hope this is useful to somebody else one day!