jotsheet

Many moons ago, when I was but a lad of 14, I was mesmerized as a classmate told me of new technology hitting the World Wide Web: frames. To say the least I was impressed. This frames stuff was hot. (Incidentally, that classmate was the son of Larry Smarr, former director of NCSA.)

But we users of Netscape 2.0 were young and naïve. Now we know better; frames suck(ed), for a variety of reasons. But frames were still useful, particularly in the way they presented content. The navigation was clear; the header was clear; the content was clear. As the user moved from page to page, much of the content remained static, imparting a feeling of security. Today, with the almost total depature of frames, the security blanket of frames has been lost.

Recovering the “security blanket”—with CSS

Today, I drew up a quick CSS layout for a coworker. It forced me to get back to the basics with CSS layouts, and I remembered a time a few years ago when I tried with limited success to use the position:fixed CSS property in a previous design. But as I composed this simple layout—header, nav, content area, and footer—I thought back to the position:fixed experiment. Maybe there was something useful there, after all. And maybe, a few years later and with a few more Web standards, well, standard, I could make it work.

So I mocked it up, real-simple like, and here ’tis:

Quasi-frames with CSS
(View source for HTML and CSS)

What’s going on here? Well, nothing too fancy schmancy. It’s your basic, flavor-of-the-month header+2col+footer layout, with the 2col background-color achieved via faux columns. However, it is rather rare to see a layout of this type with a footer of the fashion you see here. This is the behavior of the layout in various browsers:

• Mozilla Firefox and Gecko browsers: header is fixed, navigation column is fixed, content scolls, footer at bottom after nav/content
• Opera: same as Mozilla
• Microsoft Internet Explorer 6: ignores position:fixed and treats this as a normal header+2col+footer layout, scrolling everything. It degrades nicely.
• Safari: I dunno, I can’t test it! Someone tell me!

Caveats

Important point: keep the content in the navigation column short. If it goes long, it displays very strangely. But as long as you’ve got just a handful of links in your nav, you’re golden.

Also, note the quirkiness of the scrolling. It’s nice in that you get the “frame-like” behavior of a fixed header and navbar combined with a footer beneath everything, and it’s great that it scrolls via the window’s scrollbar, not some internal frame’s. The disadvantage of this behavior is that the content actually scrolling beneath the header DIV (which has a >1 z-index, so if you e.g. link to an in-page anchor, the header can cover up the beginning of the content to which you’re linking.

Other CSS as frames layouts

Well, I’m certainly not the first to do a layout like this. While I concentrated on the position:fixed property, many others keyed in on the overflow:scroll property to truly simulate frames, scrollbars and all. That CSS property comes with its own set of caveats and browser problems which I won’t delve into here. However, I will link you to some excellent resources:

• An extraordinarily well cross-referenced page on position:fixed for IE/Win from Eric Bednarz.
• Emulating frames with CSS, a very nice page by Stian Søiland.
• A centered, framed layout from APLUS.
• CSS Frames from 456 Berea Street. Fixed header and fixed footer with scrolling content in-betwixt.
• Jennifer Krynin’s “fake-framed page” using overflow:scroll.
• Stuart Nicholls’ cross-browser, fixed-position menu using position:fixed.

Feedback welcome!

Share This