Делая очередной сайт встретились с интересной задачей. Нужно было сделать секцию на всю ширину экрана, при том что родительский элемент был ограничен по ширине.
Как оказалась – задача с ходу не решалась.
В итоге нашли такое решение:
.home #page {
max-width: 100% !important;
width: 100%;
overflow: hidden;
}
.home #content {
width: 1020px;
margin: 0 auto;
}
.home #panel-1-0-0 .fullwhite {
margin: 0 -100%;
padding: 0 100%;
}Суть в том, что overflow: hidden (по сравнению с первоначальным вариантом) переносится с <body> на #page, а фиксированная ширина — с #page на #content.
Кроме #content, в #page больше ничего нет, поэтому на отображение других блоков это не влияет)
Этот пример нужно адаптировать под конкретную страницу.
