Question

I have following HTML for a heading. The .left and .right are empty spans. I have specific width for the .left and but the .text width is not always same. I want to set the background for the .left (fixed width) and the .right. The .right should get all the remaining space in the parent element (h1). How that can be done?

<h1>
    <span class="left"></span>
    <span class="text">Text</span>
    <span class="right"></span>
</h1>

I’m trying following CSS which does not work:

.left{
    background: yellow;
    width: 30px;
    height: 20px;
    display: inline-block;
}

.right{
    display: inline-block;
    background: blue;   
}

Here’s the JSFiddle link:
http://jsfiddle.net/jMR8u/

Here’s what I’m trying to get:

The idea is to set a background image in h1 except the .text span and the problem is that I can not set the background for the .text, otherwise it would be easier.

Answer 1

if i interpret your image correct .. this is the answer http://jsfiddle.net/jMR8u/4/

h1{
    border: 1px solid red;
    position: relative; 
}

.left{
    background: yellow;
    width: 30px;
    height: 20px;
    display: inline-block;
}

.right{
    display: inline-block;
    background: blue;
    position: absolute; 
    z-index: 99;
    height: 20px;
    width: 100%;
}
​.text {
    height: 20px;
    width: 150px;
    display: inline-block;
    position: relative;
    z-index; 101;
}​

ok, then use layers .. with z-index and positioning