No scrollbar for DIV wider than browser

Question

I'm doing some tests on a website using Wordpress as a CMS. In the example below the top left of the page has an "S" graphic outside of the main content area, clipped accordingly depending on the browser width. I would like to do something similar with an "L" graphic to the right in the footer.

The page width is set to 960px, and I've made the footer container DIV 1088px so that the "L" appears outside the content area. The trouble is this makes a scrollbar appear when it exceeds the current width of the browser.

I've tried overflow:hidden on the footer container DIV but this doesn't seem to work. I've also tried overflow:hidden on the BODY element and this works ok in IE, but not in other browsers.

Example: http://unclemort.com/wp/

I really hope there is away to do this, any help gratefully received.

Solution

I was trying to figure this out myself today and stumbled upon the answer. What you need is a surrounding element around everything that has this:

#wrapper {
  min-width: 600px; //whatever width you want
  overflow-x: hidden;
}

Your main content should have that same width, and the things that need to jut out should have a negative margin.

Here's a complete example:

HTML:

<div id="outer">
   <div id="container">
       <div class="row">
           <div class="inner">Hello World</div>
       </div>
    </div>
</div>

CSS:

  #outer {
      min-width: 300px;
      overflow-x: hidden;
  }

  #container {
      width: 300px;
      margin: 0px auto;
      background: gray;
      height: 500px;    
  }

  .row {
      width: 350px;
      background: blue;
      margin-left: -25px;
  }

  .inner {
      background: yellow;
      margin-left: 25px;
      width: 300px;
      height: 100px;
  }

  @media screen and (min-width: 301px) {
      body {
          //overflow-x: hidden;
      }
  }

jsfiddle:

http://jsfiddle.net/aaronjensen/9szhN/