Frustrating div issue

Ph3n0m

I have the following div layout

<div class="left_100">
	<div class="latest_header_left"><img src="spacer.gif" width="5" height="5" alt="" border="0"></div>
	<div class="latest_header_middle"><img src="spacer.gif" width="5" height="5" alt="" border="0"></div>
	<div class="latest_header_right"><img src="spacer.gif" width="5" height="5" alt="" border="0"></div>
</div>

combined with the following styling

.left_100 {float:left; margin-right:10px; width:100px;}
/*.latest_header {height:5px;}*/
.latest_header_left {background: url(../images/purple_top_left_curve.gif) no-repeat;height:5px; width:5px;display:block;float:left}
.latest_header_middle {background: #8F3F97;display:block;float:left;}
.latest_header_right {background: url(../images/purple_top_right_curve.gif) no-repeat;height:5px; display:block; width:5px;float:left}

My problem is that I am not getting a width of 100px from the output, it appears that I am just getting latest_header_left and latest_header_right side by side.

Now, I thought divs were going to save us all from tables, and what I am trying to do can easily be achieved through tables, but I need to avoid using them - does anyone have a possible solution I can try. The only thing I cannot do is predetermine the size of latest_header_middle, as the parent div is meant to to dictate the total width, in this case 100px

Serbian

Can you explain exactly what you are trying to achieve? Are you trying to achieve a box that is 100 pixels wide with rounded corners? The only way you will get the layout you have to work is to set the width of .latest_header_middle to 90px, but if I can get a better idea of what you are trying to do I can probably suggest a better way of doing it.

Ph3n0m

yes that is what I want to do, however I am trying to work out if I can leave the middle area undefined in width, so that it can auto generate a width, if the parent div changes width.

e.g. currently the parent width is 100px, so yes the middle area should be 90px, but if for some reason the parent changes to 200px, the middle should stretch accordingly

Ph3n0m

Nevermind, I found out that it cannot be done using just divs and css.

To get it to work exactly how I envisioned, I used a combination of css, spacer images and a single table - and it works perfectly. Just a pity divs couldnt help me this time around