title: horizontal scroll DIV with buttons
body: <p>Not sure what I am doing wrong, I want de content of this DIV scroll horizontaly when I press the buttons. Got a lot of code from here, but now i'm stuck.....</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
  &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /&gt;
  &lt;title&gt;Naamloos document&lt;/title&gt;
  
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;style&gt;
  #browser { float: left; width: 400px; overflow: auto; white-space: nowrap; }
  
  
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;input type="button" class="leftArrow" value="left"&gt;
  </code></pre>
  
  <p>This is the DIV that should scroll</p>
  
  <pre><code>&lt;div id="browser"&gt;
    &lt;div class="innerWrapper"&gt;
        &lt;div style="background-color:#0CC; width:200px; height:200px; display:inline-block"&gt;&lt;/div&gt;
        &lt;div style="background-color:#0FC; width:200px; height:200px; display:inline-block"&gt;&lt;/div&gt;
        &lt;div style="background-color:#3CF; width:200px; height:200px; display:inline-block"&gt;&lt;/div&gt;
        &lt;div style="background-color:#0CC; width:200px; height:200px; display:inline-block"&gt;&lt;/div&gt;
        &lt;div style="background-color:#0CC; width:200px; height:200px; display:inline-block"&gt;&lt;/div&gt;
        &lt;div style="background-color:#0FC; width:200px; height:200px; display:inline-block"&gt;&lt;/div&gt;
        &lt;div style="background-color:#3CF; width:200px; height:200px; display:inline-block"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;input type="button"  class="rightArrow" value="right"&gt;
  </code></pre>
  
  <p>I'm not sure if I should put my script here</p>
  
  <pre><code>&lt;!--
  &lt;script&gt;
     $('#right-button').click(function() {
        var leftPos = $('#content').scrollLeft();
        $('#content').animate({scrollLeft: leftPos - 200}, 800);
     });
  
        $('#left-button').click(function() {
          var leftPos = $('#content').scrollLeft();
        $('#content').animate({scrollLeft: leftPos + 200}, 800);
     });
  &lt;/script&gt;
  --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>link to 
  <a href="http://kop.hosts.ma-cloud.nl/scroll-div/" rel="nofollow">DEMO</a></p>