Question

Thinking it has something to do with my container div and their CSS. But I am trying to get the months to scroll horizontally. It just isn’t working. Any ideas?

The divs SHOULD be floating left of each other – not scrolling horizontally but vertically. Also, you need to make sure the Preview quadrant is big enough to view correctly.

JS:

jQuery(document).ready(function(){

// active class swapping on menu       
jQuery("#nm12-menu li").click(function (a) {

    // style stuff
    jQuery(this).addClass("active");    
    jQuery(this).siblings( "#nm12-menu li").removeClass("active");

    // now scroll!
    var myHash = jQuery(this).find('a').attr('href');
    jQuery('.scrollme').stop().scrollTo(myHash,800); 
    a.preventDefault();  
    });

});​

Demo here:
http://jsfiddle.net/velcrobots/ffAsR/10/

Answer 1

The floated children are contained directly in the scroll container, so they’re wrapping underneath each other because the container is the same width as they are.

You have a couple of options:

1. Place an inner div between the scrolling div and the children, which has a width set to the total width of the children.
2. Change the floats to display: inline-block and set white-space: nowrap on the scroll div.