CSS Frames

After taking a close look at Simon Jessey’s fixed sidebars and Eric Bednarz’s position:fixed; fixed for IE5(+)/win I created an example layout with a fixed size header, fixed size footer, and a content area that stretches to fill the space between the header and footer, with scrollbars if needed. And the whole thing is horizontally centered on the page. On the CSS Frames demo page I’ll write a bit about how it works later.

The demo validates and has been tested in the following browsers:

  • Mozilla 1.4/Mac
  • Mozilla Firebird 0.61/Win
  • Safari 1.0/Mac
  • IE6/Win
  • IE5.2/Mac OS X
  • OmniWeb 4.5/Mac
  • Opera 7.11/Win

It probably does not work in older versions of IE/Win.

Posted on August 16, 2003 in CSS

Comments

  1. December 23, 2003 by Alex

    Great stuff. I am not sure if you’re aware of the fact that the content area stretches between the header and footer only if scrollbars are needed. If the content is shorter than the actual window size, the content area is broken off (my name is linked to the page showing what the problem is). I wish I knew how to fix this.

  2. December 23, 2003 by Roger (Author comment)

    Yep, I know about that problem. Unfortunately I don’t have a fix for it. A workaround is to use a background image on the body to make it look like the content goes all the way down to the footer, but that won’t work with the kind of layout I’m using in my example. Sorry.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.