No horizontal scroll bar on float right

StackOverflow https://stackoverflow.com/questions/1633971

  •  06-07-2019
  •  | 
  •  

Question 

<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.

Was it helpful?

Solution

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>

OTHER TIPS

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() )
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top