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.
- Previous post: Beauty
- Next post: Link flood again
Information, sponsorship, and externals
About the author
Roger Johansson is a Swedish web professional specialising in web standards, accessibility, and usability. More about me and this site.
Latest articles
- Validation statistics from Nikita the Spider Comments off
- An analysis of the sites crawled by the bulk validation tool Nikita the Spider during March 2008.
- Authentic Jobs API and Affiliates program Comments off
- The Authentic Jobs job listing service now has a public API and an affiliate program.
- What does Acid3 mean to you and me? Comments off
- Opera and Apple have announced that their web browsers pass the Acid3 Browser Test, but how will that help web designers and developers?
- Designing Web Navigation (Book review) Comments off
- Learn the fundamentals of navigation design and design better navigation systems for large and small sites as well as for web based applications.
- DOMAssistant bundle for TextMate Comments off
- To save keystrokes and speed up development I have created a DOMAssistant bundle for TextMate.
- First impressions of Internet Explorer 8 Beta 1 Comments off
- My impressions after trying out Internet Explorer 8 Beta 1 for a couple of days.
Comments
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.
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.
Sorry, comments are closed for this post.