title: How to make content next to a fixed-position menu not overlap in smaller resolutions
body: <p>I'm trying to figure out how to make it so if a user has a browser window that's under about 1024px (the site has no horizontal-scroll at 1024px+), if they do scroll right to see more of the main content, that it does not get overlapped/messy'd by the left fixed-position menu.</p>
  
  <p>I've made a JS fiddle that recreates the basic problem I am facing: <a href="http://jsfiddle.net/YE7ZZ/1/" rel="nofollow">http://jsfiddle.net/YE7ZZ/1/</a></p>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>#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;
  
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;div id="wrap"&gt;
      &lt;div id="top"&gt;&lt;/div&gt;
      &lt;div id="left"&gt;menu item~~~~~&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;menu item~~~~~&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;menu item~~~~~&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;menu item~~~~~&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;menu item~~~~~&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;menu item~~~~~&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;/div&gt;
      &lt;div id="positioner"&gt;
          &lt;div id="content"&gt;asdf content that should be lower-resolution browser friendly and not be overlapped by the menu&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
  
              asdf content that should be lower-resolution browser friendly and not be overlapped by the menu&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
              asdf content that should be lower-resolution browser friendly and not be overlapped by the menu&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
              asdf content that should be lower-resolution browser friendly and not be overlapped by the menu&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;&lt;br /&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I have attempted to solve this issue about three separate times over the course of the past six weeks and have not been able to find a fix, so any help would be appreciated so much.</p>
  
  <p>Thank you for your time.</p>
  
  <p><strong>edit-- my ideal solution</strong> would be that a horizontal scroll-bar appears for the content portion, so that they can scroll through the content itself, without having to: 1) overlap the left menu; or 2) cut off the amount of content viewable; or 3) reduce the size of the left menu</p>
  
  <p><strong>SOLVED: thank you so much to @Gaby aka G. Petrioli</strong></p>
  
  <p>I used this javascript solution:</p>
  
  <pre><code>$(document).ready(function(){
  var lastLeft = -1,
      menu = $('.left_, .top_');
  
  $(window).on('scroll resize', function(){
      var left = $(window).scrollLeft();
      if (left &gt;= 0 &amp;&amp; left!==lastLeft){
          lastLeft = left;
          menu.css('left',-left+'px');
      }
  });
  </code></pre>
  
  <p>});</p>
  
  <p>And changed the CSS as he outlined, and on my live version, had to change the positioning from some top menu elements from fixed to absolute. Thank you so much everyone!</p>