Почему абсолютно позиционированный div растягивает вёрстку?

Question

[Сергей Ларионов]

Есть 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 слева обрезает выступающие абсолютно позиционированные элементы, а справа нет - остается открытым.

Comments

[andruxin]

Не очень понятно, что требуется получить на выходе. У вас все блоки имеют фиксированную ширину, поэтому и появляются полосы прокрутки. Если заменить все width на max-width, не получим ли нужныйрезультат?

Answer 1

[demimurych]

Оберните ваш div.site в еще один div нужного размера и к нему примените overflow:hidden

Comments

[Сергей Ларионов]

Как ни банально - но да, это решение. Я почему-то пытался применить overflow:hidden для вышестоящего body, полагая, что эффект должен быть идентичен.

Answer 2

[Tesla]

Почему бы не воспользоваться float вместо position: absolute? http://jsfiddle.net/mkwfv/3/

Comments

[Masterme]

потому что ему нужно чтобы .content было фиксированной ширины

[Сергей Ларионов]

Потому что в случае float ширина контента будет в т.ч. зависеть от ширины рекламы (размещаемой пользователем). А нужно, чтобы ширина контента была строго кратна определенному размеру (плиточный интерфейс). Вся суть задачи - в корректном размещении рекламы ЗА пределами основной области сайта.

Answer 3

[Masterme]

> Левый блок отрисовывается как задумано: на узком экране показывается частично, остальное благополучно обрезается.

Это так, только толку от этого ноль, потому что левый блок шириной остаётся такой же, просто он скрывается за левой границей body вместе с контентом. Если бы ты был внимательнее - ты бы увидел, куда пропадает текст "ads left" внутри этого блока.

> т.к. он только скрывает саму прокрутку (а не обрезает страницу)

С каких пор это не одно и то же?

> Почему так происходит и как побороть?

Происходит потому что левая граница body скрывает контент, а правая - нет. Правильно это решается таблицей.

Comments

[Сергей Ларионов]

> просто он скрывается за левой границей body вместе с контентом да-да! так и нужно чтобы происходило. > С каких пор это не одно и то же? 1. Зажимаем в браузере среднюю кнопку мышки и благополучно переезжаем в область, недоступную через скроллбар. 2. В телефоне/планшете уменьшаем масштаб и таки видим ту самую, якобы "обрезанную" область. > Происходит потому что левая граница body скрывает контент, а правая - нет. Так вот этом и вопрос. Почему так происходит? А как конкретно задача решается таблицей, учитывая что контентная область должна быть отцентрирована на экране?

Answer 4

[axeax]

Размер рекламы произвольный и по ширине и по высоте?

Answer 5

[wdtime_ru]

про position и overflow, на примерах: position css | overflow css