Очень интересная реализация блока по всей 100% ширине сайта внутри блока фиксированной ширины.
Многие из нас сталкивались, бывает необходимо на сайте даже прям в контенте статьи добавить блок 100% ширины на весь сайт, но часто это блоки на главной странице, выглядит это вот так:
Но когда ширина контента сайта ограниченная или фиксированная, например 960px, то возникнет проблема, а сделать это оказывается просто, вот так:
#wrapper{overflow: hidden;}
.width100{margin: 0 -100%; padding: 0 100%;background: #F2F2F2;}
Поясняю:
1. Блоку родителю, например body или #wrapper, необходимо применить overflow, иначе появится полоса горизонтальной прокрутки внизу страницы.
2. А блоку, например с классом .width100 в котором должен быть контент, применяем сдвиг поля и отступа по горизонтали на 100%