I'm building a portfolio site and to do something a little bit different with it (for me) I thought I'd do a horizontal scrolling website. The difference being, there'd be no scrollbars and you can click+drag on the content area to scroll it. I've gave it a crack but I've hit a brick wall and would really appreciate some help.

Here is a rough wireframe of my goal, which might help explain what I'm wanting to achieve:

As you can see the content (gallery) is aligned to the left edge of the page with the thumbnails running off the right edge. Say the container is a <ul> and each project is a <li>, I'd like anywhere in the <ul> to be draggable. Clicking on a <li> would take you to another page. Originally I thought the items off the page would have a class set so the opacity could be lowered and once fully in view or 80% in view, the class could be removed and the opacity increased - but one step at a time! Just trying to give as much info as possible!

My 1st attempt:  http://codepen.io/moy/pen/OVapeK

The overflow works but the position of the content jumps on click rather than a smooth drag. When the content doesn't run out of the viewport, dragging seems to work fine. But as soon as overflow comes into play it breaks.

Once issue I had with this was that I had to set a width onto the draggable div so the projects displayed on 2 lines and wrapped correctly, which isn't ideal as I'll be adding quite a few. Also due to the way floats work, the content runs from left to right (example 1 below). I'd prefer the products to run up-down-up-down, like in the diagram below:

Although I'd rather use floats (if possible) for the layout to work in older versions of IE. I did manage to get this working using CSS columns. You can see this here in my 2nd attempt in this CodePen: http://codepen.io/moy/pen/waQNyM

The content is vertically centred, which works fine but as soon as the content is dragged a top value is set inline which messes up the positioning when resizing the browser for a responsive layout.

Ideal I'd see this as being 2 columns, when the viewport isn't tall enough, it would collapse to 1 column - easy enough with media queries but I'd need to bear in mind if this effected the javascript. On mobile, say under 600px I'd just display the content vertically down the page.

Apologies for the lengthly read, I just wanted to give as much info as possible of what I'm trying to do, so if anyone can help they get the full picture!

Thanks for reading,

Steve