Position:absolute causes horizontal scrollbar

Question

Absolutely positioned (side yellow advertisements) div\'s cause unwanted horizontal scrollbar when window is resized (size decreased) beyond them. Scrollbar should appear on

Answer 1

// need to disable AutoScroll first, otherwise disabling the horizontal scrollbar doesn't work

flowLayoutPanel.AutoScroll = false;

// disable horizontal scrollbar

flowLayoutPanel.HorizontalScroll.Enabled = false;

// restore AutoScroll

flowLayoutPanel.AutoScroll = true;

Hope this will resolve your issue.

Answer 2

Absolutely-positioned elements that expand beyond the boundaries of the body seem to cause scrollbars to appear, for some reason. You can remedy this by simply wrapping everything inside the body tag in a relatively-positioned div styled with overflow: hidden;. The absolutely positioned content that expands beyond the boundaries of this container won't cause scrollbars on the window.

Here's a working example: http://jsfiddle.net/8UkQA/1/

Answer 3

You need to give the child coordinates a.k.a. top: 0; left: 0;

Answer 4

I may like to further add, if the same problem is being faced and by using the solution suggested by @Aaron the page seems to not scroll then you can use axis specific version of the "overflow" attribute, as following,

overflow-x: hidden;

This will only hide the content protruding on the right hand side (or left hand side if website is RTL) and not the vertical content.

Also to further enhance this method if the protruding content is appearing only at a certain resolution (as in my case), you can use css media query to restrict the behaviour.

@media (min-width: 1500px) {
    body {
        overflow-x: hidden;
    }
}