Как сделать так, чтобы контент рядом с меню с фиксированным положением не перекрывался при меньшем разрешении ⇐ Html

[Anonymous]

Я пытаюсь выяснить, как сделать так, чтобы, если у пользователя есть окно браузера размером менее 1024 пикселей (на сайте нет горизонтальной прокрутки с разрешением 1024 пикселя и выше), если он прокручивает вправо, чтобы увидеть больше основного контента, чтобы оно не перекрывалось и не запутывалось левым меню с фиксированным положением.
Я создал JS-скрипт, который воссоздает основную проблему, с которой я столкнулся: http://jsfiddle.net/YE7ZZ/1/
CSS

Код: Выделить всё

#wrap {
width:100%;
background-image:url('../images/Imagine/bg_image44.png');
background-attachment:fixed;
}

#top {

}

#left {
position:fixed;
border:1px solid red;
background:pink;
width:250px;
}
#positioner {
margin-left:250px;
width:auto;
}
#content {
border:1px solid green;
width:700px;
margin:auto;
background:grey;

}

HTML

Код: Выделить всё

menu item~~~~~

menu item~~~~~

menu item~~~~~

menu item~~~~~

menu item~~~~~

menu item~~~~~

asdf content that should be lower-resolution browser friendly and not be overlapped by the menu

asdf content that should be lower-resolution browser friendly and not be overlapped by the menu

asdf content that should be lower-resolution browser friendly and not be overlapped by the menu

asdf content that should be lower-resolution browser friendly and not be overlapped by the menu

Я пытался решить эту проблему трижды в течение последних шести недель, но не смог найти исправления, поэтому буду очень признателен за любую помощь.
Изменить: моим идеальным решением было бы появление горизонтальной полосы прокрутки для части контента, чтобы можно было прокручивать сам контент без необходимости: 1) перекрывать левое меню; или 2) ограничить количество просматриваемого контента; или 3) уменьшить размер левого меню.
РЕШЕНО: большое спасибо @Gaby aka G. Petrioli
Я использовал это решение на JavaScript:

Код: Выделить всё

$(document).ready(function(){
var lastLeft = -1,
menu = $('.left_, .top_');

$(window).on('scroll resize', function(){
var left = $(window).scrollLeft();
if (left >= 0 && left!==lastLeft){
lastLeft = left;
menu.css('left',-left+'px');
}
});
});

И изменил CSS, как он описал, а в моей активной версии пришлось изменить расположение некоторых элементов верхнего меню с фиксированного на абсолютное.

Подробнее здесь: https://stackoverflow.com/questions/192 ... er-resolut