Missing horizontal scroll bar to the right
<html> <head> <style type="text/css" rel="stylesheet"> * {margin:0;padding:0;} div#box {background-color:green;width:1000px;} /* #box {position:absolute;top:0;right:0;} */ /* #box {position:absolute;top:0;left:0;} */ /* #box {float:right;} */ #box {float:left;} .clearer {clear:both;} </style> </head> <body> <div id="box"> asdafdsf </div> <div class="clearer"></div> </body> </html> Uncomment the first float left id with the float on the right and you will see. I also left my tested solutions.
You should have a complete reproduction of copy and paste.
I do not believe that this can not be done without using javascript. The browser displays the page relative to the upper left corner of this page, so everything located above or to the left of this point 0,0 is effectively off-screen. All overflows occur from the bottom and to the right. Similarly, with the contents inside any element of the block. Therefore, if you have an element located relative to the right side of the page, the width is more than 100%. The part to the left of the 0.0 reference point will simply be off-screen.
I would like someone to prove that I'm wrong.
The javascript solution works here:
<html> <head> <style type="text/css" rel="stylesheet"> * {margin:0;padding:0;} div#box {background-color:green;width:1000px;} #box {position:absolute;top:0;left:0;} .clearer {clear:both;} </style> </head> <body> <div id="box"> asdafdsf </div> <div class="clearer"></div> <script type="text/javascript"> function layout() { if( typeof( window.innerWidth ) == 'number' ) this.screenWidth = window.innerWidth; else //patch for IE this.screenWidth = document.body.clientWidth; this.el = document.getElementById('box') if (this.el.offsetWidth > this.screenWidth) window.scroll(this.el.offsetWidth,0); else this.el.style.left = (this.screenWidth - this.el.offsetWidth) + 'px'; } function eventListener(el,action,func) { if (el) { if (el.addEventListener) el.addEventListener(action, func, false); else if (el.attachEvent) el.attachEvent('on' + action, func); } } eventListener(window,'resize',layout); layout(); </script> </body> </html> I had (it seems to me, such) a problem in which I would like to align the canvas element, which is wider than the div that holds it. Div is about 300 pixels, canvas element about 1000 pixels.
Using float: right , the canvas was right-aligned, but the scrollbars on the div disappeared.
I solved this with jQuery using scrollLeft() to set the initial scroll based on the width of the div and canvas, similar to:
$("#div").scrollLeft(canvas.width() - div.width() )