Question

I’m working on a jquery slider, except instead of using a fixed-width container, I’m using the whole browser window. I’ve got jQuery set up to fix the margins to make sure it’s centered correctly (although I just made them 500 pixels in the demo to keep it simple), but the problem is when I try to add more divs, it puts them on a second line instead of putting them beyond the edge of the browser. Here is my code: http://jsfiddle.net/JsPZT/

Eventually, I’ll change the overflow so that they are hidden when they are beyond the edge of the browser, but for now, I just want to know that they are on the same line and not being pushed onto the second.

So my question is what should I change in the CSS to make sure the divs are always on the same line, even if it means pushing them beyond the edge of the window?

Answer 1

You need to add a width to your #track CSS. That is your wrapper, and without a width on that, the items will just overflow and drop to the next line. You’ll probably have to add another div to set the overflow and get everything positioned correctly.