Horizontal Jquery Scrollbar for Multiple Rows

Question

I need a slider with two rows, It is possible in a way, but that's not what I need. Here is the deal;

According to a tutorial I can line up multiple div's horizontally.

But if I need two rows, then it will sort items like this:

While what I need is this:

(gray area is invisible)

What is the correct method to solve this problem?

The HTML of the code is just like:

<div id="main">
<div id="content-slider"></div>
<div id="content-scroll">
  <div id="content-holder">
        <div class="content-item" id="item-1">item 1</div>
        <div class="content-item" id="item-2">item 2</div>
        <div class="content-item" id="item-3">item 3</div>
        <div class="content-item" id="item-4">item 4</div>
        <div class="content-item" id="item-5">item 5</div>
        <div class="content-item" id="item-6">item 6</div>
        <div class="content-item" id="item-7">item 7</div>
        <div class="content-item" id="item-8">item 8</div>
    </div>
  </div>
</div>
</div>

It's OK to play with the CSS but I am looking for a solution with minimal interference with the HTML code.

Answer 1

Working closely to the style of the example, try something like this: http://jsfiddle.net/GBr6e/

I have arranged the markup into columns consisting of two items, tweaking the css slightly.

Hope this helps!