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!
