Как расширить элемент жидкости за пределы шаблона фиксированной ширины

Question

Я попал в затруднительное положение, когда у меня есть сайт с фиксированной шириной, но мне нужны две полосы ширины жидкости, чтобы пройти 100% по экрану. Я использую довольно ужасный шаблон WordPress для рассматриваемого сайта, что каждый раз, когда вы сохраняете какие-либо настройки, он сохраняет ширину контента в соответствии с его настройками. В данном случае это 900px.

Дело в том, что я доволен тем, что весь сайт составляет 900 пикселей, мне нужны 100% только строка заголовка и нижний колонтитул, даже элементы внутри этих столбцов могут иметь размер 900 пикселей, мне просто нужен цвет для расширения на каждую сторону экрана.

Сайт, о котором идет речь, - http://mysterybox.co/ Вы можете видеть на изображении ниже, какая полоса мне нужна. Если бы кто-нибудь мог указать мне правильное направление, это было бы здорово.

Answer 1

Просто создайте новый контейнер для верхнего и нижнего колонтитула и извлеките их из вашего #container div. Примерно так будет работать:

HTML

<div class="header-wrapper">
  <div id="headerwidth">
   ....
  </div>
</div>

<div class="footer-wrapper">
  <div id="footer">
   ....
  </div>
</div>

CSS

.header-wrapper, .footer-wrapper {
 background-color:#000;
 margin:30px 0 40px;
}

#headerwidth, #footer {
 width:900px;
 margin:0 auto;
}