I'm trying to create a bar with a dynamic horizontal width. The backgrounds are transparent pngs so they can't overlap. I have one for the left side, one to repeat-x across the dynamic width middle and then another bg for the right. Here is kinda what I have so far...

.bar{
width: 100%;
}

.left{
width: 50px;
height: 50px;
float: left;
}

.mid{
height: 50px;
float: left;
}

.right{
width: 50px;
height: 50px;
float: right;
}

<div class="bar">
    <div class="left"></div>
    <div class="mid"></div>
    <div class="right"></div>
</div>

So the main problem is extending the .mid all the way across to meet the right, width: 100% doesn't work.

The other problems is what can I do if I have content that needs to overlap the .left and .mid divs? Set up another div and use z-index?

Thanks so much!