title: jQuery: horizontal scroll to div
body: <p>What I'm aiming to achieve in the end in something similar to the bbc site: <a href="http://www.bbc.co.uk" rel="nofollow">http://www.bbc.co.uk</a> with a side scroll from section to section. Here's my code and I'll explain the problem I'm facing:<br>
  jsFiddle: <a href="http://jsfiddle.net/neal_fletcher/kzQFQ/2/" rel="nofollow">http://jsfiddle.net/neal_fletcher/kzQFQ/2/</a> <br>
  HTML:</p>
  
  <pre><code>&lt;div class="wrapper"&gt;
      &lt;div class="container"&gt;
          &lt;div class="contentContainer red"&gt;&lt;/div&gt;
          &lt;div class="contentContainer blue"&gt;&lt;/div&gt;
          &lt;div class="contentContainer orange"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="left"&gt;LEFT&lt;/div&gt;
  &lt;div class="right"&gt;RIGHT&lt;/div&gt;
  </code></pre>
  
  <p>jQuery:</p>
  
  <pre><code>$(document).ready(function () {
      $('.right').click(function () {
          $('.container').animate({
              'left': '-100%'
          });
      });
      $('.left').click(function () {
          $('.container').animate({
              'left': '0%'
          });
      });    
  });
  </code></pre>
  
  <p>Firstly I don't know if it's possible to stack the <code>.contentContainer</code> divs next to each other without having to set a 300% width on the <code>.container</code> div. As the site is going to be CMS I don't want to keep changing the width of the <code>.container</code> div to suit. There will only ever be one <code>.contentContainer</code> div in view at one time too, thus I've set the overflow to hidden.<br>
  I can't seem to figure out a nice scroll function too, the one I have currently only scrolls the <code>.container</code> div once by 100%, ideally I'd want this to work more like a slideshow, i.e. on a loop, if possible. Any suggestions would be greatly appreciated!</p>