Question

I have a totally simple layout, in the page is only a silver background and the red DIV, as is possible to see on the image below. My problem is, that when I add the red DIV into my layout page, the page is longer on the length than 100% (bottom on the right corner – slider). Where could be a problem that caused this?

The CSS properties of the red DIV are:

html, body {
   background-color: silver;
   margin: 0;
   padding: 0;
 }

.red-div {
    overflow: hidden;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

Answer 1

.red-div {
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
    right:0; /* This is what you need */
}

That way, you can force it to go to the end of the browser. When you do 100%, you do not account for the scrollbars. Which add the extra space and thus the annoying side-scroll