How to make a div extend when floating it?

Question

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%;
overflow: hidden;
}

.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!

Answer 1

There's a good article to get you started on how to do this over at A List Apart: In Search of the Holy Grail. The basic idea is that you give .mid padding sized to fit .left and .right, then use some positioning tricks like negative margins to move .left and .right into place.