Очень интересная реализация блока по всей 100% ширине сайта внутри блока фиксированной ширины.

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

Блок 100% ширины внутри фиксированного

Но когда ширина контента сайта ограниченная или фиксированная, например 960px, то возникнет проблема, а сделать это оказывается просто, вот так:

#wrapper{overflow: hidden;}
.width100{margin: 0 -100%; padding: 0 100%;background: #F2F2F2;}

Поясняю:
1. Блоку родителю, например body  или #wrapper, необходимо применить overflow, иначе появится полоса горизонтальной прокрутки внизу страницы.
2. А блоку,  например с классом  .width100 в котором должен быть контент, применяем сдвиг поля и отступа по горизонтали на 100%

Вернуться в список