Position: fixed CSS templates

In 2006 I wrote an article about simulating Frames and Iframes and from time to time, I get questions of how to make modifications to the templates presented. But one big thing has changed since 2006: Perfect support for IE6 is no longer mandatory.

So yesterday, when Brandon Cobb of Super Fighter Team asked about a design with a fixed header, fixed left column, and scrolling right column, I thought I’d renew my take on simulating frames with CSS (The original article is still good for background information, so I still recommend reading it).

Position: fixed CSS templates

The idea is this: Instead of specifying what parts of the page should scroll, we can specify what parts should stay fixed when scrolling. This makes it easier to deal with several fixed parts of the same layout, but also allows us do to things frames cannot do.

So what’s the trick? Well, position: fixed does exactly what we want. It works just like position: absolute, but it stays still when the page is scrolled. So it’s really just a matter of making sure things don’t overlap.

Try resizing the page, and see how the scrolling works. The templates have been tested in: Fx 3.5, IE8, IE7, IE6 (see note below), Opera 10, Safari 4; all on Windows. Let me know if you can test it on more browsers, or find bugs.

You’re of course free to use this templates as you see fit, with or without a link back, commercially or not. Consider it public domain.

Fixes for IE6

As I’ve said, these designs don’t act the same in IE6. Instead of some parts being fixed, the whole page scrolls in IE6. The good thing about this is that IE6 users won’t see that your site is “broken”, they will just get another design. And as the number of IE6 users goes towards zero, your design will be more and more consistent :). The fallback is very simple, IE6 gets position: absolute instead of fixed, using the !important hack (you should probably use conditional comments instead).

Hope these templates are useful for some of you!

18 responses to “Position: fixed CSS templates

  1. This reminds me of old school iframes, but using css makes it more accessible and more search engine friendly.

  2. @Mac: I just tested it again, for me, it works fine of chrome on the mac.

    @Johan: I deliberately did not add a fix for IE6 to keep the code to a minimum. IE6 is dying soon anyways.

    @Gin: Same here, such a shame. Doesn’t Safari for iPhone support position: fixed?

    To all: Even though it doesn’t work everywhere, it falls back nicely everywhere I’ve tried, including Safari for iPhone. So you should be fine using it anyway.

  3. Why use !important hack, when IE will also apply _background: red declaration. True the CSS won’t validate, but since websites are for users, not for validators, this shouldn’t matter that much.

  4. Thanks for the css code on this.
    I just converted a page using frames to this style.

    The page works fine …..But, when I convert it to an external style sheet it works fine on the server. But it doesn’t work when I run it merely on the local computer.

    Does this make sense?

    The content page scrolls over the top of the header.

    Here’s the page:

    Any idea how to fix it?


  5. @Robert Test: I have no idea why that would happen. Have you looked at the Net tab in the Firefox extension Firebug? Maybe one of your style sheets is hardcoded to be on the server…

  6. Interesting, but I will not use it as IE6 has not completely disappeared … The demos make one think of the 90s with flashy colors and frames, it is a form of nostalgia? :)

  7. Emil –
    Thanks for the articles and the important descriptions of dealing with IE 6.

    However, this is generally pretty basic stuff. How about something like a full length header with a fixed navigation on the left and two vertical frames on the right, with a fixed header and footer on the top “frame” with a scrolling frame in the middle, and each “frame” adjustable – so that the Navigation will slide in or out of site and the top or bottom “frame” of the right main “frame” can be expanded/contracted to fit the entire main “frame”.

    This is what I have together, with a scrolling grid in the top right frame, but I can’t seem to keep the grid within bounds. It wants to run off the side of the screen on the right the same distance of the left navigation area.

    Top banner is fixed, Navigation is fixed, right main “frame” is fixed. I have tried everything in the way of positioning on the grid area (upper right), which needs to have overflow set to “auto”. I was hoping to find an example on the Web, but no luck.

  8. Solved: width:auto on the parent container :0)

    I’ll post this somewhere and provide a link when (or if) I can deal with cross-browser issues.

Comments are closed.