CSS for a header with both fixed-width and dynamic width images

[NickThissen]

Hi,

I need my header to consist of five parts:

• Two fixed-width images on the left and right side
• A fixed-width image in the middle, centered
• Two dynamic width images between these, to fill the gaps

Here's a schematic representation of what I want:

The red and blue parts are fixed, the green parts are there just to fill the gaps between the red and blue parts when the header is resized. The blue part in the middle should stay centered.

The image in the green parts of course tiles horizontally so that it can be repeated indefinitely.


How can I achieve this?

So far I got this:

.title_left
{
    float: left;
    width: 250px;
    height: 126px;
    background: url('../Images/header_left.jpg')
}
 
.title_right
{
    width: 250px;
    height: 126px;
    background: url('../Images/header_right.jpg')
}
 
.title_middle
{
    width: 400px;
    height: 126px;
    background: url('../Images/header_middle.jpg')
}
 
.title_fill   /* green parts */
{
    width: ???;  /* (auto doesn't work) */
    height: 126px;
    background: url('../Images/header_fill.jpg')
}

I've tried a few variations, having float: left and right on various styles, but nothing gives me what I want... The biggest problem is that the fill parts (green parts) are stretched toward the end of the page (width: auto) and not toward the next image, so that the next image is pushed down...

Thanks!