Automatically fill middle repeated div horizontally - css

Question

I have essentially three divs.
<div id="headerLeft"></div>
<div id="headerMiddle"></div>
<div id="headerRight"></div>
With the following CSS
#headerLeft
{
background-image: url("topLeft.png");
height: 88px;
width: 329px;
float:left;
}
#headerMiddle
{
background-image: url("topMiddleRepeat.png");
background-repeat:repeat-x;
position:relative;
height: 73px;
float:left;
color: white;
min-width:100px;
padding-top: 15px;
}
#headerRight
{
background-image: url("topRight.png");
float: left;
height: 87px;
width: 47px;
float:right;
}
I need the middle div to repeat horizontally to fill the rest of the header's space. I can't set the width of the div manually because this html will be inserted into other pages of unknown widths.
I've tried setting the width to 100% but that just fills up the whole line and pushes the leftHeader above the middleHeader and the rightHeader below the middleHeader.
Here is the page I am currently trying to manipulate. http://dl.dropbox.com/u/1501628/web/ipiphony.html
Any help would be greatly appreciated.

Answer 1

The way you are trying to do it i don't think it's possible, What i would do is this:
<div id="header">
<div id="headerLeft"></div>
<div id="headerMiddle"></div>
<div id="headerRight"></div>
</div>
And the CSS
#header {
background-image: url("topMiddleRepeat.png"); /* In the container */
background-repeat: repeat-x;
height: 88px; /* the height of your images */
}
#headerLeft {
background-image: url("topLeft.png");
height: 88px;
width: 329px;
float:left;
}
#headerMiddle {
height: 73px;
float:left;
color: white;
min-width:100px;
padding-top: 15px;
}
#headerRight {
background-image: url("topRight.png");
float: left;
height: 87px;
width: 47px;
float:right;
}
That way your background will cover the header. Another option is to nest the divs and set the background to eack one and use padding for the sides.
<div id="header">
<div id="headerLeft">
<div id="headerRight">Your text here</div>
</div>
</div>
And the CSS
#header {
background-image: url("topMiddleRepeat.png"); /* In the container */
background-repeat: repeat-x;
height: 88px; /* the height of your images */
}
#headerLeft {
background-image: url("topLeft.png");
height: 88px;
padding-left: 329px;
}
#headerRight {
background-image: url("topRight.png");
height: 87px;
padding-right: 47px;
}

Answer 2

Try the following:
Update the following styles:
#header {
position: relative;
overflow: hidden;
min-height: 85px;
}
#headerLeft {
background-image: url("topLeft.png");
height: 88px;
width: 329px;
position: absolute;
left: 0;
top: 0;
}
#headerMiddle {
background-image: url("topMiddleRepeat.png");
height: 73px;
color: white;
padding-top: 15px;
margin-left: 329px;
margin-right: 47px;
}
#headerText {
position: absolute;
left: 260px;
font-size: 20px;
font-weight: bold;
}
#headerRight {
background-image: url("topRight.png");
height: 87px;
width: 47px;
position: absolute;
right: 0;
top: 0;
}
If there are still issues, I recommend uploading the styles and HTML to jsfiddle.net so everyone can have an active play.