Как вынести ширину DIV'a за границы Wrap'a, в котором он лежит?

Question

[Сергей Шилов]

Есть основная контентная часть шириной 1020px с margin 0 auto(классика), в которой лежит всё от хидера до футера, но один из блоков мне надо сделать на 100% по ширине экрана, то есть, чтобы он выходил за пределы дива, в котором он лежит. Как это можно сделать?

Answer 1

[GreatRash]

Чем не устраивает такое?

<div class="wrap">
  <!-- some content -->
</div>

<div class="wrap-2">
  <!-- some full width content -->
</div>

<div class="wrap">
  <!-- some content -->
</div>

Answer 2

[Сергей Мельников]

можно вывести его за предел wrapa если задать div'у отрицательный margin по сторонам

.somedive {
   margin-left: -100px;
   margin-right: -100px;
}

но пока он внутри wrapa, нельзя задать ему ширину как у экрана (100%).
Тут надо либо div вынести за предел wrap, либо задать ему margin с помощью js

Comments

[Сергей Шилов]

после этого блока будут идти следующие и за границы врапа вынести не получится, надо по средствам каскада реализовать

Answer 3

[Andrew Dabich]

Можно сделать невидимый div для этого элемента с высотой которая будет и шириной в размер основного контейнера. А сам блок который нужно вывести в 100% сделать position: absolute; и разместить с помощью margin-top ровно над подготовленным для него контейнером который не будет вылазить и не будет виден. Всё для того чтобы отступы были такие же. Ведь absolute размещает элемент поверх всех. А так должен как раз быть где нужно.

Answer 4

[Tashiro]

если у этого элемента не будет по каскаду вверх ни одного родителя с position: relative или absolue. ставьте этому элементу { position: absolute; left: 0; right: 0}