Question

I’m building a site with a 1700px wide JS slideshow at the top. When I publish the page, I get horizontal scrollbars since my monitor is on a 1024px resolution. How do I get the site to be centered in the browser with no horizontal scrollbars – and whatever is superfluous on either side simply isn’t visible to the user?
Help GREATLY appreciated, thanks!!!

Answer 1

Simple solution:

body { overflow-x: hidden; }

But this will also stop people scrolling if their monitor is smaller than the main width of your site.

The real solution is to simply not have it be 1700px wide all the time. Something like the following may help, but it depends on your HTML and how your slideshow is implemented.

#slideshow { width: 100%; max-width: 1700px; }

I haven’t tested this, but you may be able to get away with putting the above CSS on a container element, something like this:

#slideshow-container { width: 100%; max-width: 1700px; }
#slideshow { width: 1700px; margin: 0 auto; }

You can do this pretty easily. jsFiddle example.