Фиксирование блока с шириной экрана между двух элементов, как?

Question

[p1s9p1]

Доброй ночи, вот сам код, наткнулся на проблему, не думал что будет настолько больно.. проблема в том что пытаюсь разместить блок с шириной 100% между двумя элементами с фиксированной шириной но при этом они находятся в блоке с авто шириной экрана 100%!.. и получается следующие блок 1 стоит отлично, после следует блок 2 вместо того что бы упереться в блок 3 он его выталкивает.. z-index не подходит ибо блоки полупрозрачные. помогите зафиксировать блок 2 между двух элементов с шириной 100% т.к разрешения мониторов есть разные..
скрин

Answer 1

[Андрей Б.]

Можно и без calc()

Достаточно сделать таким образом:

.fullscreen {
   position: relative;
}
.re-fukop {
   ...
   left: 0;
   padding: 0 109px;
   box-sizing: border-box;
}

/* Либо еще проще */
.re-fukop {
   ...
   width: 100%; /* убрать */
   left: 109px;
   right: 109px;
}

Comments

[p1s9p1]

кроссбраузерность, спасибо!

Answer 2

[blolg]

как вариант можно так jsfiddle.net/por4brks/2

Comments

[p1s9p1]

то что и требовалось!)

Answer 3

[Stalker_RED]

Если ширина боковых элементов известна, то можно задать центральному элементу ширину через calc()
jsfiddle.net/por4brks/1

Comments

[Rad1us]

Тоже сейчас искал ответ на этот вопрос. Calc помог! Спасибо)