Home/ Questions/Q 9324719
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-19T04:40:12+00:00

Try the following code: <!DOCTYPE html> <html style=min-width:600px; overflow:auto;> <body style=background:grey; padding:0px; margin:0px;> <div

  • 0

Try the following code:

<!DOCTYPE html>
<html style="min-width:600px; overflow:auto;">
        <body style="background:grey; padding:0px; margin:0px;">
                <div style="text-align:right;">
                     this is some text
                </div>
            <div id="footer" style="
                    background:yellow;
                    position:fixed;
                    height: 100px;
                    width:100%;
                    min-width: 600px;
                    text-align:right;
                    bottom:0px;
                    ">
                    footer text
            </div>
        </body>
</html>

So when I make the width of the browser window less than 600px, a horizontal scroll bar appears at the bottom of the window as expected. When I scroll to the right, the phrase “this is some text” scrolls into view, which is great. However, the phrase “footer text” does not scroll into view, which is the problem.

How do I get both the “footer text” and “this is some text” to scroll into view as I drag the window scroll bar to the right? THe yellow footer must always appear at the bottom of the website.

I would prefer a clean CSS solution to this. I will accept a javascript solution if absolutely necessary.

Thanks

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s because for fixed elements the containing block is not en element but the viewport (cf. http://www.w3.org/TR/CSS2/visuren.html#fixed-positioning)

    You should try the method described here which use absolute positionning: http://alistapart.com/article/footers

    OP says:
    Thanks. I used jquery by doing $(window).scroll(function(){$('#footer').css('left', parseInt(-1*$(window).scrollLeft();)+'px');}); I guess that was easy enough

    • 0