div doesn't expand to the width of parent div

[taval]

Hi,

I'm trying to make a title header in css, the header has three parts. The 1st and 3rd part are images, and the 2nd part holds the text for the header. Something like:

-----------|---------------------------|--------|
Graphic Text Graphic

The whole header is contained inside a container div, which is given 100% width. The graphics ( 1st and 3rd part) are fixed in size. I just want the 2nd part to expand to fill the container div taking into account the 1st and 3rd Parts.
I tired "width:expression(100%-21px);" for the 2nd Part, but no luck. I have the code below. Can anyone help me out.
Thanks in advance.

HTML Code

----

<div class="headingContainer">
<div class="headingSection1"></div><div class="headingSection2"><div class="headingText">Member Login</div></div><div class="headingSection3"></div>
</div>

----


CSS Code

-----
.headingContainer
{
height:20px;
width:100%;
margin:2px;
margin-left:5px;
margin-top:10px;
margin-bottom:10px;
}

.headingSection1 {
background-image: url(

http://localhost/intranet/images/leftCorner.gif);

background-repeat: no-repeat;
position: static;
height:17px;
float:left;
voice-family: "\"}\"";
voice-family: inherit;
left: 1px;
width: 18px;
}

.headingSection2 {
background-image: url(

http://localhost/intranet/images/middle.gif);

background-repeat: repeat-x;
position: inherit;
float:left;
width:expression(100%-21px);
height:18px;
padding-top:2px;
}

.headingSection3 {
background-image: url(

http://localhost/intranet/images/rightCorner.gif);

background-repeat: no-repeat;
float:left;
height:16px;
voice-family: "\"}\"";
voice-family: inherit;
width: 3px;
}
---

 

[Vragabond]

Have you thought about just not using a div for the center piece? The rules say that if you have text after two floated elements, that text will float next to them -- if one is left and another is right then text will stay in between. You can apply everything that is applied to the second section to the container div.

 

[taval]

Ok, I'll try that out and tell you how it goes. The text is actually held inside a div which has a background image. and that image has to be there for the header to look complete, since the all the parts make one header. Anyway, I'll try what you have suggested. Many Thanks.