No scrollbar for DIV wider than browser

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 开发者_StackOverflow社区to do this, any help gratefully received.

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/

Try in style.css, line 65, adding:

#footer-container {
    border: none;
    overflow: hidden;
}

Explanation:

#footer-container #footer {
    background: #f5e8f7 url('images/slobraico-footer-pink-full.gif') no-repeat top left;
    width: 1088px;      
    height: 217px;  
    overflow: hidden;   
    }

The scrollbar you're hiding is effectively not there. The scrollbar you're seing is another one. The problem is that the footer is 1088px wide, and that's causing a scrollbar to appear.

As long as the footer has fixed width and it's parent doesn't have overflow: hidden, you'll get a scroll if there's not enough width for the footer to fit. Same goes for any other container.