100% DIV width is not really 100%

When I have a <div> with width: 100%, it is not really 100%:

<div id="div">testtesttesttesttest</div>

...

#div {
  width: 100%;
  background-color: red;
}

Now when you resize the window, so there is a horizontal scrollbar, and you scroll to the right, then the background is vanished. How can I remain the background in this case?

Here you can see the problem in action: http://beta.ovoweb.net/?i=3

Now when you resize the window and scroll to the right, you can't see the background anymore. How to fix this?

Solution 1:

The 100% value is 100% of the parent's width or the view port. See the documentation.

Solution 2:

Width: 100%, is highly affected by its margin and margin and padding of its parent (body in your case). SO, reset them first

Something like

body {
    margin: 0;
    padding: 0;
}
#div {
  margin: 0;
  width: 100%;
  background-color: red;
}

DEMO

Solution 3:

add this to css:

html, body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
}

Then it should work.