title: CSS Horizontal Scroll tricks
body: <p>So here is my content:</p>
  
  <pre><code>&lt;div class="items_viewed" id="block1"&gt;
      &lt;div class="item_wrapped"&gt;
          &lt;div id="item1" class="item"&gt;item 1&lt;/div&gt;
          &lt;div id="item2" class="item"&gt;&lt;/div&gt;
          &lt;div id="item3" class="item"&gt;&lt;/div&gt;
          &lt;div id="item4" class="item"&gt;&lt;/div&gt;
          &lt;div id="item5" class="item"&gt;item 5&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="clear"&gt;&lt;/div&gt;
  &lt;div class="items_viewed" id="block2"&gt;
      &lt;div class="item_wrapped"&gt;
          &lt;div id="item1" class="item"&gt;item 1&lt;/div&gt;
          &lt;div id="item2" class="item"&gt;&lt;/div&gt;
          &lt;div id="item3" class="item"&gt;&lt;/div&gt;
          &lt;div id="item4" class="item"&gt;&lt;/div&gt;
          &lt;div id="item5" class="item"&gt;item 5&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The CSS is as simple as it can get:</p>
  
  <pre><code>.items_viewed {
      width:100%; 
      height:410px; 
      overflow:auto;
  }
  .item_wrapped {
      width:990px;
  }
  .item {
      height:380px; 
      width:148px; 
      background:#CCCCCC; 
      float:left; 
      margin:4px;
  }
  </code></pre>
  
  <p>I need the first <code>block1</code> to start with <code>item1</code> as the first viewable item and <code>block2</code> to show <code>item5</code> as the first viewable item.</p>
  
  <p>Thus when the user scrolls the page, he swipes right to left for <code>block1</code> and left to right for <code>block2</code>.</p>
  
  <p><code>direction:ltr</code> doesn't seem to be helping. And I don't want to use Javascript since it will increase the load time.</p>
  
  <p>Please advise</p>
  
  <blockquote>
    <p>Edit:
    <a href="http://jsfiddle.net/8of8j0d9/" rel="nofollow">http://jsfiddle.net/8of8j0d9/</a> Just for reference</p>
  </blockquote>