3
<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 right one and you will see. I left my tried solutions commented out as well.

You should have a full repro from a copy and paste.

Greg
  • 316,276
  • 54
  • 369
  • 333
jdelator
  • 4,101
  • 6
  • 39
  • 53

3 Answers3

2

I don't believe there is any way around this without using javascript. The browser renders a page relative to the top-left corner of that page, so anything positioned above or to the left of that 0,0 point is effectively off-screen. All overflow happens to the bottom and the right. It's the same way with content inside of any block element. So if you have an item positioned relative to the right side of the page, wider than 100% width. The part to the left of the 0,0 origin point will simply be offscreen.

I'd love for someone to prove me wrong though.

Here's a javascript solution that works:

<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>
Travis
  • 4,018
  • 4
  • 37
  • 52
0

I had (what I think may be) a similar issue where I wanted to right-align a canvas element that is wider then the div that holds it. The div is about 300px, the canvas element about 1000px.

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 div and canvas widths, similar to:

$("#div").scrollLeft(canvas.width() - div.width() )
Nathan Tuggy
  • 2,237
  • 27
  • 30
  • 38
Dave Britt
  • 1
0

I had this problem. I solved it by making the inner contents display:inline-block, then the outer container text-align:right. The inner content gets 'floated' right (as if it was inline text) but the scrollbar still remains. You have to reset the text-align on the inner content or all its content gets aligned right too.

If your inner content doesn't like being inline-block, then you're stuck with other solutions.

Dramatica
  • 1
  • 1