Есть div с контентом сайта. Стоит задача по бокам от него разместить блоки с рекламой.
Естественно, ширина контентного div'а неизвестна и меняется, размеры рекламы также произвольны.
Вёрстку удалось свести вот к такому простейшему примеру:
<div class="site">
<div class="content">content</div>
<div class="ads left">ads-left</div>
<div class="ads right">ads-right</div>
</div>
* смотри
пример на JsFiddle
Рекламные блоки позиционированы абсолютно.
Левый блок отрисовывается как задумано: на узком экране показывается частично, остальное благополучно обрезается.
Правый же, если не помещается в экран, порождает горизонтальную полосу прокрутки.
Почему так происходит и как побороть?
Сразу говорю: вариант с "body { overflow-x: hidden; }" точно не подходит, т.к. он только скрывает саму прокрутку (а не обрезает страницу), и на мобильных устройствах при масштабировании странички получается некрасиво.
"CSS is awesome" ©
UPD:
Решение на JsFiddle, спасибо demimurych
Впрочем, решение найдено,
но ответ на вопрос, почему body слева обрезает выступающие абсолютно позиционированные элементы, а справа нет - остается открытым.
