Как заставить div расширяться при его перемещении?

Question

Я пытаюсь создать панель с динамической горизонтальной шириной.Фоны прозрачные, поэтому они не могут перекрываться.У меня есть один для левой стороны, один для повторения-х по середине динамической ширины, а затем еще один bg для правой.Вот кое-что, что я имею до сих пор ...

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

Таким образом, основная проблема - это расширение .mid до конца, чтобы встретить право, ширина: 100% не работает.

Другая проблема заключается в том, что я могу сделать, если у меня есть контент, который должен перекрывать div .left и .mid?Установить еще один div и использовать z-index?

Большое спасибо!

Answer 1

В A List Apart есть хорошая статья о том, как это сделать: В поисках Святого Грааля . Основная идея заключается в том, что вы задаете .mid отступы, соответствующие размеру .left и .right, а затем используете некоторые приемы позиционирования, такие как отрицательные поля, чтобы переместить .left и .right на место.