Question

I’m currently working on a heading in joomla with background formed from 5 parts of images. Should look like this (just an ASCII example)

{=<Text>=--------}

which is split into

1. Left ({=<)
2. Title (Background for the text)
3. Title-Right (>=-)
4. Middle (-)
5. Right (-})

Hope you guys can visualize this. Now, Title and Middle need to be repeated x, but I want Title to size according to the text, supposedly background for the text’s div. I can’t seems to get the right combination of div and css to do it correctly. Right now I wrap div in div for each part until the text. After the text, they just goes to the next line. display: inline can’t help much also. Guess I’m not so good with CSS after all.

Thanks in advance.

NOTE: I can’t attach print screen as the images are copyrighted.

EDIT: the Middle part has to expand so that the Right part hits the end, basically occupying the whole width.


|<-----------------------------Full Width of DIV------------------------------->|
{=<Short Text>=------------------------------------------------------------------}
{=<Much Longer Text>=------------------------------------------------------------}
{=<Much Much Much Longer Text>=--------------------------------------------------}


Thanks to Bazzz, I’ve found a way to do it.

Since Middle when set to width: 100% will reach the right end, so the only way to pull back a little is by using a shorter wrapper. Then place the “Right” part after the wrapper.

HTML

<div id="Header">
    <div id="Wrapper">
        <span id="Left">&nbsp;</span>
        <h1 id="Title">Title text</h1>
        <span id="Title-Right">&nbsp;</span>
        <span id="Mid">&nbsp;</span>
    </div>
    <span id="Right">&nbsp;</span>
</div>

CSS

#Header span, #Header h1 {
    display: inline-block;
    white-space:nowrap;
    overflow: hidden;
    width: 570px;
}
#Wrapper span, #Header h1 {
    display: inline-block;
    white-space:nowrap;//Don't wrap into 2nd line
    overflow: hidden;//This help with the 100% width setting
    width: 550px;//Header width - "Right" width
}
#Left {
    width: 20px;
    background: blue;
}
#Title {
    background: yellow;
}
#Title-Right {
    width: 20px;
    background: grey;
#Mid {
    width: 100%; //Maximize this
    background: green;
}
#Right {
    width: 20px;
    background: red;
}

Answer 1

Here is my attempt to create what you asked for, see if it matches your requirement:

http://jsfiddle.net/47Aej/

You obviously can replace the background: blue;, background:red; etc. with your images. also feel free to change the “Title text” to see that the yellow part will size according to the text (it is the same h1 in the end).

HTML

<div id="Header">
<span id="Left">&nbsp;</span><h1 id="Title">Title text</h1><span id="Mid">&nbsp;</span><span id="Right">&nbsp;</span>
</div>

CSS

#Header span, #Header h1 {
    display: inline-block;
}
#Left {
    width: 20px;
    background: blue;
}
#Title {
    background: yellow;
}
#Mid {
    width: 60px;
    background: green;
}
#Right {
    width: 20px;
    background: red;
}