span widths not fluctuating

[admin]

CSS
.xpBox-title-l {
margin: 0;
padding: 0;
width: 26px;
height: 30px;
float: left;
background-image: url(/images/sidebox-title-left-blu.png);
}

.xpBox-title-m {
margin: 0;
padding: 7px 0 0 .5em;
height: 30px;
float: left;
background-image: url(/images/sidebox-title-bg.gif);
font: bold 80% Arial, Verdana, sans-serif;
color: #FFFFFF;
}

.xpBox-title-r {
margin: 0;
padding: 0;
width: 6px;
height: 30px;
float: right;
background-image: url(/images/sidebox-title-right.gif);
}

MARKUP
<div>
<span class='xpBox-title-l'></span>
<span class='xpBox-title-m'><%= rs("title") %></span>
<span class='xpBox-title-r'></span>
</div>


In short I have 3 spans wrapped in a div. rs("title") is some data that I'm pulling from my db. The three spans have background images that have various widths but are all 30px high. Vertical alignment on these images are perfect with the above code. However the middle span's (xpBox-title-m) background image is only as wide as the text being returned by the db and I want it to reach over until it bumps xpBox-title-r. I tried declaring a width of 100% for the .xpBox-title-m but that made it the entire width of the div. Can anyone give me any solution? the div size fluctuates and I want the left span to float left the right span to float right and the middle span to fill up the space between. Thanks

see <!-- m --><a class="postlink" href="imagehttp://www.lenawee.org/images/post.gifHave">imagehttp://www.lenawee.org/images/post.gifHave</a><!-- m --> you tried specifying

display: block;

for your middle span, then setting the padding to be the widths of the spans on either side?Hey Dave,
You had me excited but no go. I tried setting the width back to 100% then setting negative margins to equal the widths of the adjacent spans and that worked on one side but not the other. Any other ideas?LOL

Is it possible to reorder the spans and change them to divs?

if so try CSS:

<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}
.xpBox-title-l {
margin: 0;
padding: 0;
width: 26px;
height: 30px;
float: left;
background: blue;
}

.xpBox-title-m {
margin: 0;
padding: 0;
height: 30px;
background: yellow;
font: bold 80% Arial, Verdana, sans-serif;
color: #FFFFFF;
}
.xpBox-title-m div {
padding: 26px 0 0 6px;
}

.xpBox-title-r {
margin: 0;
padding: 0;
width: 6px;
height: 30px;
float: right;
background: red;
}

-->
</style>

and html:

<div>
<div class='xpBox-title-l'> </div>
<div class='xpBox-title-r'> </div>
<div class='xpBox-title-m'><div> </div></div>
</div>

edited to spell padding correctly...udaman Dave,
the order of the divs in the markup was the key. looks like the browser was rendering the middle div before the right side div thus leaving no room for the right side div and pushing it down to a new line. so rendering left (width: 26px; float: left; ) then right (width: 6px; float: right; ) then rendering the middle one allowed the browser to accurately calculate the distance between. Thanks for your help man, much appreciated.If you did a copy & paste from your code to create your originall post, I think the problem is your mis-spelling of the word 'padding'.

_____________

Nevermind... I think actually it doesn't appear till my code. oops Hah! You're right. Good thing he's not relying on me for his answers!I'm not saying anything.
I can't even spell pading... lol