How to make a div extend when floating it?
- by cjmcjm
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!
