html - overflow-x:hidden still can scroll

Question

The problem is:

I have a full width bar menu, which is made by creating a big margin on the right and to the left. This margin should be cropped by overflow-x: hidden, and it is... no scroll bars, everything (visually) is ok...

But, if you drag the page (using Mac Lion) or scroll to the right, the page shows an enormous bar, which should have been cropped by the overflow-x:hidden.

CSS

html {
  margin:0;
  padding:0;
  overflow-x:hidden;
}
body {
  margin: 0 auto;
  width: 950px;
}

.full, .f_right {
  margin-right: -3000px !important;
  padding-right: 3000px !important;
}

.full, .f_left {
  margin-left: -3000px !important;
  padding-left: 3000px !important;
}

Here is a link: http://jsfiddle.net/NicosKaralis/PcLed/1/

You have to open in draft to see... the jsfiddle css somehow makes it work.

@Krazer

i have and structure like this:

body
  div#container
    div#menu_bar
      div#links
      div#full_bar
    div#content_body
    ...

the #container is an centered div and has fixed width of 950px, the #full_bar is an bar that extends on the entire window, from one side to the other

if i put width 100% in #full_bar it will get only the inside width and not the width off the window

Answer 1

I had this exact same problem. I solved it by putting overflow-x: hidden; on both the body and html.

html, body {
  margin: 0 auto;
  overflow-x: hidden;
}

html{
  padding: 0;
}

body {
  width: 950px;
}

.full {
  background: red;
  color: white;
  margin-right: -3000px !important;
  margin-left: -3000px !important;
  padding-right: 3000px !important;
  padding-left: 3000px !important;
}

<div>
  <div class="full">
    abc
  </div>
</div>