Preventing horizontal scrolling after a certain width

Question

I'm making a website with a large image at the top that extends past the far right of the page. The problem is that the browser keeps adding a horizontal scroll bar to allow the user to scroll to the end of this image but I don;t want it to do that.

Is there any way I can tell the browser to treat the image a bit like a background image or to simply stop scrolling after 940px?

http://www.electric-drumkit.com/404.php

There's an example of the page so you can get a better idea of what I mean.

Answer 1

The way to do it here is to:

• Add a new div (or other relevant HTML5 tag if you prefer): <div id="wrapper">, containing everything inside body.

• Move these rules from body to #wrapper:

  margin: 0 auto;
  position: relative;
  width: 960px;
  

• Add this new CSS:

  body {
      min-width: 960px;
      overflow: hidden;
  }
  

• Add this to get horizontal scrolling back when the window is less than 960px wide:

  html {
      overflow: auto;
  }
  

Here's a live demo so you can quickly see if my answer will have the desired effect.

Tested in Firefox, Chrome, IE8.