Position absolute right - no scroll bar

Question

When I set my wrapper to absolute and right, the horizontal scrollbar fires when I squeeze the window.

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

the code:

<div id="wrapper"></div> #wrapper { width: 400px; height: 400px; position: absolute; right: 20px; top: 0px; border: 1px solid red; } 

If I switch to the right: 20 pixels; left: 20 pixels; It works, but not otherwise. Any idea how to fix this without javascript?

Answer 1

The problem is that there is no content after #wrapper . To get horizontal scrolling, content should be fixed on the left edge of the document, which becomes hidden when the tapering viewport or specified content exceeds the width of the viewport. Since #wrapper floats to the right, this is not possible because it does not have a left-handed anchor point. :after makes it work.

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

In the CSS above, a space is added after the contents of the body , which is #wrapper . This space is at least the width of the #wrapper box model, but does not have a float and is tied to the left edge of the viewport. So ... as soon as its extreme right edge is hidden, horizontal scrolling starts; creating the illusion that #wrapper triggers a scroll event.

Violin: http://jsfiddle.net/jg3nH/

Answer 2

Using float right would be more logical for me, but you need an absolute position, you can set the width or the minimum 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 }