Верстка блоков за пределами окна.

[vovka-morkovka]

Здравствуйте. Вот сайт http://big-buy.in.ua/domashnij-kinoteatr.html. На странице сверстаны "уши" в виде ромбов. Сейчас - это абсолютно спозиционированные блоки :after и :before для #main-content.

 

Проблема:

1) имеем горизонтальную полосу прокрутки(причем она появляется, только, если есть блок :before)

2) на iphone полоса прокрутки автоматически устанавливается по центру, контент как-бы прилипает к левому краю и левые уши не видно вообще.

 

Пробовал устанавливать для body overflow-x: hidden, но это не выход, да и на айфонах проблема остается. Спасибо.

Edited November 24, 2013 by vovka-morkovka

[Z1gnet]

заверните весь сайт в див (все что внутри body) и дайте этому диву width:100%; overflow:hidden; на body нужно задать min-width обязательно. около 1000рх

2) на iphone полоса прокрутки автоматически устанавливается по центру, контент как-бы прилипает к левому краю и левые уши не видно вообще.

на айфоне и везде где экран меньше 1000рх уши и не должны быть видны вообще. хотя я бы это ушами не назвал бы

[vovka-morkovka]

Z1gnet, благодарю.

[vovka-morkovka]

На айфоне все равно прижимается к левому краю(

Edited November 25, 2013 by vovka-morkovka

[Z1gnet]

во-первых не overflow-x: hidden;  а  overflow: hidden; без "х".

во-вторых что там у вас на айфоне? справа ромбы видны?

[vovka-morkovka]

Вывод ромбов для iphone убрал через media queries.