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.
- Demo: Fixed top, fixed left, scrolling right
- Demo: Fixed top, scrolling bottom
- Demo: Fixed left, scrolling right
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!
Patric Jansson ( 1 Jan 2010 )
Simple and useful!
Cody ( 9 Jan 2010 )
This reminds me of old school iframes, but using css makes it more accessible and more search engine friendly.
Jeff Seager ( 11 Jan 2010 )
Beautifully simple, Emil, as it should be!
Gypsy Jane ( 20 Feb 2010 )
Works on Chrome, too. Thanks.
Sheena Rai ( 24 Mar 2010 )
Nice Examples Cool Stuff. Works On Chrome , Safari, IE Etc.. Nice Work…
Mac ( 26 Mar 2010 )
@Gypsy- It doesn’t work on my version of Chrome on the mac.
Johan ( 8 Apr 2010 )
Interesting stuff about fixing it in IE6
Gin ( 13 May 2010 )
It doesn’t work on Safari for iPhone. :-(
Emil Stenström ( 14 May 2010 )
@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.
Karol ( 25 May 2010 )
Why use
hack, when IE will also apply
declaration. True the CSS won’t validate, but since websites are for users, not for validators, this shouldn’t matter that much.
Robert Test ( 25 Aug 2010 )
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:
http://www.testfamilygenealogy.com/Narratives/Early/fryburg.html
Any idea how to fix it?
Thanks
Emil Stenström ( 28 Aug 2010 )
@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…
martin ( 2 Sep 2010 )
perfect!!
Nicolas Chevallier ( 14 Oct 2010 )
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? :)
Buddy ( 5 Nov 2010 )
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.
Buddy ( 5 Nov 2010 )
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.
Emil Stenström ( 5 Nov 2010 )
@Buddy: Looking forward to your link, thanks for keeping us updated!
websitedevelopmentdeveloper ( 20 Jan 2011 )
The information shared on IE6 is very useful and worth knowing. Its good that the users won’t be able to see the broken site. The fixed CSS templates would prove a breakthrough indeed.