Position absolute right - No scrollbar visible

Question

When I positioning my wrapper absolute and right there is no horizontal scrollbar triggered when I shrink the window.

Example: http://jsfiddle.net/Ue6aN/

Code:

<div id="wrapper"></div>


#wrapper {
 width: 400px;
 height: 400px;
 position: absolute;
 right: 20px;
 top: 0px;
 border: 1px solid red;
}

If I switch right: 20px; to left: 20px; it's working, but not otherwise. Any idea how to fix that without javascript?

Answer 1

The problem is that there is no content following #wrapper. To get a horizontal scroll there has to be content anchored on the left edge of the document that becomes hidden when the viewport is narrowed, or said content exceeds the viewport width. Since #wrapper is floating right, that's impossible because it has no left-side anchor point. :after makes it work though.

#wrapper { float:right ... }

body:after {
    clear:right;
    content:' ';
    display:block;
    height:1px;
    min-width:420px
}

The CSS above adds a space after the content of body, which is #wrapper. That space is at least the width of #wrapper's box model, but has no float, and is anchored to the left edge of the viewport. So... as soon as its far right edge is hidden, the horizontal scrolling is triggered; thus giving the illusion that #wrapper is causing the scroll event.

The fiddle: http://jsfiddle.net/jg3nH/

Answer 2

Using float right would be more logical to me but you need to absolute position you could set the width or min-width of the containing element.

body {
    position: relative;
    height: 400px; //needs to be at least 1px
    width: 100%;
    min-width: 422px; // the width you'd like to horizontal scrollbar to appear
}