Search code examples
csspositionfixed

CSS scrolling on both html element and fixed element with min-width

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

Solution

  • 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