Position:fix Headers

HTML & CSS
1

I was looking at some sites with position fixed header/navigation. I suppose the appeal is that they keep the navigation/branding in place so that it’;s always available while still allowing for scrollable content. I remember this UI stratagem being popular back in the days of FRAMES!!!

Anyway, I was looking into sites that did this. I think the Achilles heel of this method is that if shrink your window so that it is narrower than the width of the site, not only will you lose your header, but you cant SCROLL to reach it or the navigation within it. That seems like a serious accessibility flaw.

So my question is, is there a PURE CSS way of HORIZONTALLY ( but not vertically) scrolling, or at least giving the appearance of scrolling) an element with position:fixed?

As always, thanks everyone, for sharing your insights.

2

So my question is, is there a PURE CSS way of HORIZONTALLY ( but not vertically) scrolling, or at least giving the appearance of scrolling) an element with position:fixed?
I’m afraid not, fixed is fixed and that means no scrolling.

Even if it got it’s horizontal reference from a static parent, the fixed element cannot be scrolled back into view after it goes beyond the fold.

3

thanks, Rayzur. I suppose there is till some need for js yet… :confused:

4

Yeah as much as we hate to say it there are some things that css can’t do. In this case though, fixed positioning does behave the way it was intended to. It’s best to keep fixed position elements as small as possible and towards the top of the page.

I’m pretty sure you knew what I meant by letting the parent control the horizontal positioning. That is, as long as you don’t set a lt/rt offset value it will position itself within the parent . But in the end it is still fixed to the viewport’s left edge once it makes contact with it.

Here is a fixed div with the text on the right, it’s what you should try to avoid.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>position:fixed</title>

<style type="text/css">
body {
    margin:0;
    padding:0;
    font:100%/1.3 arial;
}
#wrap {
    width:1100px;
    margin:0 auto;
    background:#CDF;
}
#fixed {
    position:fixed;
    width:1050px;
    height:60px;
    padding:0 25px;
    background:lime;
    font:bold 1.5em/60px arial;
    text-align:right;
}
#main {
    min-height:300px;
    padding:60px 0 0;
}
p {margin:1em 25px;}
</style>

</head>
<body>

<div id="wrap">
    <div id="fixed">Fixed Position Element</div>
    <div id="main">
        <p>Lorem ipsum dolor sit amet consectetuer amet eget Sed Morbi Curabitur. Urna condimentum Nulla Maecenas 
        semper quis facilisi at sed turpis elit. Eros tincidunt consequat tincidunt gravida tincidunt diam fringilla 
        amet malesuada Aenean. Condimentum nunc ac Proin Sed laoreet tortor nibh nunc Aenean sem. Netus tristique 
        scelerisque est elit eget urna pellentesque wisi eget pellentesque. Aliquam vel tristique Vestibulum rutrum 
        Vestibulum sit lobortis molestie quis venenatis.</p>
        <p>Lorem ipsum dolor sit amet consectetuer amet eget Sed Morbi Curabitur. Urna condimentum Nulla Maecenas 
        semper quis facilisi at sed turpis elit. Eros tincidunt consequat tincidunt gravida tincidunt diam fringilla 
        amet malesuada Aenean. Condimentum nunc ac Proin Sed laoreet tortor nibh nunc Aenean sem. Netus tristique 
        scelerisque est elit eget urna pellentesque wisi eget pellentesque. Aliquam vel tristique Vestibulum rutrum 
        Vestibulum sit lobortis molestie quis venenatis.</p>
    </div>
</div>

</body>
</html>
5

Thanks again, Rayzur. that was actually my first try…
then I started getting desperate…lol