title: Sliding a div using jQuery scrollleft
body: <p>I'm pretty new to jQuery, so this is probably a noobish question.  I want to move a div left and right, manually (not animated).  Specifically, I want to be able to click a Left button, and it moves left 100px, or click a Right button, and it moves right 100px.  I'm sure I'm missing something obvious (probably multiple obvious things), but I've done a lot of checking, and I haven't been able to find anything that helps.  I am using the basically self-contained code below as a test.  The div just doesn't move.</p>
  
  <pre><code>    &lt;!DOCTYPE HTML&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        $(document).ready( function() {
          $("#left").click( function() {
            var pos = $("#cont").scrollLeft()-100;
            $("#cont").scrollLeft(pos);
          });
          $("#right").click( function() {
            var pos = $("#cont").scrollLeft()+100;
            $("#cont").scrollLeft(pos);
          });
        });
      &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
  
      &lt;div id="cont" style="position:relative; overflow:auto; width:400px; height:50px; border:10px solid #D6D6D6;"&gt;&lt;/div&gt;
      &lt;br /&gt;
      &lt;input type="button" id="left" value="Left"&gt;&amp;nbsp;&amp;nbsp;&lt;input type="button" id="right" value="Right"&gt;
  
      &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>