CSS Frames v2, full-height

Way back in August of 2003 I wrote a short article called CSS Frames, in which I described a technique to emulate the visual appearance of HTML frames with CSS. That is more than three years ago, so I think it’s about time to revisit the technique and improve it a bit, especially as the original CSS Frames demo page has been receiving loads of traffic lately.

I only had to take a quick look at the code to tell that it’s been a few years since I made the demo. Looking at old code can be a bit embarrassing sometimes. The demo contains a list of browsers that I had tested the technique in. “Mozilla Firebird 0.61” is mentioned as one of them. Like I said, it was a while ago. So here is an update.

The reason for coming up with the CSS Frames technique was, of course, to avoid having to use HTML frames. If you don’t know why you would want to avoid using frames, read my article Who framed the web: Frames and usability.

Now, on to the updated CSS Frames technique.

The layout: header, full-height content, footer

The layout I describe here will have a fixed header at the top of the page, a scrolling content area in the middle, and a fixed footer at the bottom of the page. The concept can be adapted to other types of frame-like layouts, but I’m leaving that as an exercise for you.

I have also made sure that the content area will stretch to 100 percent of the viewport height even if there isn’t enough content to cause scrolling. For that I used the technique described by Peter-Paul Koch in 100% height.

The layout consists of three main blocks: #header, #content, and #footer. The frame effect is created in two steps. First, #header and #footer are given fixed positions at the top and bottom of the viewport respectively. Second, #content is given padding-top and padding-bottom to match the heights of #header and #footer.

All three blocks are contained in a div element with the id #wrap to enable easier control of the layout width and horizontal centering. #content is contained in #content-wrap because of the 100 percent height technique I’m using. The block that scrolls needs to have a height of 100 %, but it also needs padding-top and padding-bottom. That would add up to more than 100 %, so the padding is set on #content instead. Both have the same background.

Different widths

Depending on whether you want the layout to stretch across the entire width of the viewport or not, you will need to use different widths for the #header and #footer elements. Elements that have position:fixed are positioned with respect to the viewport, so just setting their widths to 100% (you need to set a width or they will shrinkwrap to fit their content) and adjusting the width of #wrap will not work. #header and #footer would still be as wide as the viewport, though unless left or right is specified their left edges would be at the left edge of #wrap, where they would be if they hadn’t been positioned at all.

I’ve prepared two example documents to show the difference. In Example 1, the layout is fully fluid, so #header and #footer are 100 % wide. In Example 2 the layout is 40 ems wide, and the widths of both #header and #footer are set to that same value.

The CSS

Here is the CSS that is used for Example 1:

  1. html,
  2. body {
  3. margin:0;
  4. padding:0;
  5. height:100%; /* 100 % height */
  6. }
  7. html>body #wrap {height:100%;} /* 100 % height */
  8. #header {
  9. width:100%;
  10. height:5em;
  11. }
  12. html>body #header {
  13. position:fixed;
  14. z-index:10; /* Prevent certain problems with form controls */
  15. }
  16. html>body #content-wrap {height:100%;} /* 100 % height */
  17. html>body #content {padding:6em 1em;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */
  18. #footer {
  19. width:100%;
  20. height:5em;
  21. }
  22. html>body #footer {
  23. position:fixed;
  24. bottom:0;
  25. z-index:10; /* Prevent certain problems with form controls */
  26. }

And this is what makes Example 2 work, with the differences emphasised:

  1. html,
  2. body {
  3. margin:0;
  4. padding:0;
  5. height:100%; /* 100 % height */
  6. }
  7. html>body #wrap {height:100%;} /* 100 % height */
  8. #wrap {
  9. width:40em;
  10. margin:0 auto;
  11. }
  12. #header {
  13. width:40em;
  14. height:5em;
  15. }
  16. html>body #header {
  17. position:fixed;
  18. z-index:10; /* Prevent certain problems with form controls */
  19. }
  20. html>body #content-wrap {height:100%;} /* 100 % height */
  21. html>body #content {padding:6em 1em;} /* 6em = height of #header and #footer + 1em, 1em = give the content some breathing space */
  22. #footer {
  23. width:40em;
  24. height:5em;
  25. }
  26. html>body #footer {
  27. position:fixed;
  28. bottom:0;
  29. z-index:10; /* Prevent certain problems with form controls */
  30. }

The IE workarounds

Unfortunately, Internet Explorer for Windows up to and including version 6 does not support position:fixed. Since it is used by too many people to be ignored, a workaround is needed. Amazingly, IE7 does not need any workarounds. It just works! IE5 and 6, however, are sent a few extra rules using conditional comments:

  1. <!--[if lt IE 7]>
  2. <link rel="stylesheet" href="ie.css" type="text/css">
  3. <![endif]-->

The file ie.css contains the following CSS:

  1. html,
  2. body {background:url(foo) fixed;}
  3. #header,
  4. #footer {
  5. position:absolute;
  6. z-index:10;
  7. }
  8. #header {top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop : document.body.scrollTop)}
  9. #wrap,
  10. #content-wrap {height:100%;}
  11. #content {padding:6em 1em;}
  12. #footer {top:expression(eval(document.compatMode && document.compatMode=='CSS1Compat') ? documentElement.scrollTop +(documentElement.clientHeight-this.clientHeight) : document.body.scrollTop +(document.body.clientHeight-this.clientHeight));}

This works in IE 5, 5.5, and 6. (Though I didn’t bother to fix the horizontal centering in IE 5.*. It’s time to let go of IE 5.* anyway.)

Scrolling is slightly choppy, but it works. Since expressions rely on JavaScript being enabled this will not work when JavaScript is off. Fortunately all that happens in those cases is that the whole page scrolls. No content is hidden.

Progressive enhancement or graceful degradation?

In browsers that do not support position:fixed – with the exception of IE5-6 – the whole page will scroll, which is a perfectly acceptable fallback. I’m using a child selector to let only the browsers that support it see the position:fixed declarations. Whether you let browsers that do not support fixed positioning (with the exception of IE5-6/Win) see any CSS at all is a different matter.

This technique works in all modern browsers I have been able to lay my hands on, with one exception. The technique used to make the content area stretch to 100 percent of the viewport height causes some strange behaviour in iCab and IE/Mac. The problems are cosmetic and not too bad, so I think most will be able to live with that.

Other than that, I’m not aware of anything. That doesn’t mean there aren’t any problems however, so please speak up if you find any bugs or have suggestions for further improvement.

A note on scrolling

There are a couple of scrolling-related issues with this technique:

  • When you scroll by pressing the space bar or page up/down keys on your keyboard, this technique has a problem in that the document area will scroll too far, hiding part of the unread content behind the header or footer, depending on which direction you’re scrolling in.
  • The vertical scrollbar extends above and below the actual area that scrolls, which can feel odd.

For possible solutions to these problems, please see The all new fixed layout by Stu Nicholls.

Update (2006-09-05): Well, that didn’t take long. As mentioned in comment #6, both examples suffer from what looks like a variation of the “jump on hover bug” described in Quirky Percentages in IE6’s Visual Formatting Model in Internet Explorer 6. I currently have no solution to the problem, so if you know how to fix it, please post a comment with the solution :-).

The bug is triggered because the links change border-style on :hover. I commented that part out of Example 1, so the bug is not triggered there. I left it in Example 2 so you can see the exotic effect of the page shrinking ;-P.

Update (2006-09-05): I’ve managed to track the bug to the width:100% I use on the body element to prevent disappearing scrollbars in IE6 when the window is narrower than any part of the content with a set width.

I removed the width declaration from ie6.css for now, so no more funky jumping when you hover over the links.

Update (2006-09-16): Thanks to the excellent info provided by Georg in comment #36, I’ve managed to get around the problems in IE6 (I hope). As a bonus, the technique now also works in IE 5.*.

Translations

This article has been translated into the following languages:

Posted on September 5, 2006 in CSS

Comments

  1. No luck with number 2 on IE 6… the whole page scrolls for me. Glad to see an update to what brought me here in the first place.

  2. September 5, 2006 by Roger Johansson (Author comment)

    Dave: Oops. That is understandable since the link to the IE6 CSS file was wrong in Example 2. Fixed now.

  3. just wondering…

    wouldn’t it be easier to use dean edwards’ ie7 to handle the ||position: fixed|| problem?

  4. The IE7 JavaScript library files are bloated. If you are willing to make that kind of bandwidth sacrifice for a bit a functionality that you might get, then go for it. However, I’d recommend against doing so.

  5. @Jordan - the standard IE7 library is 23KB. That is half the size of the Prototype library. Do you think that is bloated too?

  6. In Ie6.0.2900.2180.xpsp_sp2.gdr.050301-1519 ( thats the Ie version on my windows) when I rollover the link the page the page shrink to the left, very rare.

  7. September 5, 2006 by Roger Johansson (Author comment)

    nick: Easier… well it depends on what you’re looking for.

    MAt: Wow. Yeah you’re right. I didn’t notice that during IE6 testing. Hmm. I’ll need to find a fix for that obviously.

  8. Well done, Roger! Love this! :)

  9. September 5, 2006 by Roger Johansson (Author comment)

    Ok, it seems I have some bug hunting to do here for IE6. Both examples suffer from what looks like a variation of the “jump on hover bug” described in Quirky Percentages in IE6’s Visual Formatting Model. I’m not sure I have the time to find a solution right now, so if anyone can figure it out, please post a comment.

    The trigger of the bug is the border change on the links on :hover (from dotted to solid). I commented that part out of Example 1, so the bug is not triggered there. I left it in Example 2 so you can see the exotic effect of the page shrinking ;-P.

    Jeff: Thanks :-).

  10. @Dean Edwards:

    “bloated” was an inappropriate choice of words, and I regret that choice. It’s simply that I have a hard time using a JavaScript library that does anything more than exactly what you need it to do. I have no problem with the IE7 library specifically.

  11. @Mat: Yeah, I’ve seen that stuff too, very weird… I was playing around with a new design for my companys site and tought it’d be nice to do something with fixed sidebar. I’m using TopStyle and it was in preview pane I’ve seen that first and it behaves the same in IE. So I decided not to use it. It’s a pretty funny bug, tho… If I remeber correct, the bug introduced itself when I added display:block and :hover on link elements. Those links were in a floated div. Looks like they won’t play nicely with some of the IE fixes. Go figure…

  12. Maybe Holly and John over at position is everything have got the bugfix you need?

    Stu Nicholls’ website CSS play also has a very nice CSS Frames version. Take a look at the website of Friar Tuck.

  13. I also made a few frames with CSS some time ago. Less code :)

    Anyway, it’s god that you push the use of CSS instead of frames and I’m glad to hear that you recieve a lot of traffic to your old (and probably this) article. That means less people will reside to frames when “partly scrolling” layouts are needed. Good work!

  14. CSS “frames” are great, but they still have a small usability problem: you can no longer scroll one page at a time by hitting spacebar or clicking just bellow the scroll thumb since the browser doesn’t take into account your header and footer height when scrolling. Well, you can, but then you’ll miss a couple of line of text.

    Unfortunatly I don’t have any solution.

  15. Hi Roger! Thanks for this! Greetings from Brazil ;-) Erika

  16. The problem with this CSS technique is that any relative or absolute elements placed in the content (scrolling) area will remain fixed in IE6 (they do not scroll with other fluid elements).

    This is a show stopper unless someone comes up with a solution.

    The IE7 library of Dean Edwards solves that without any flicker.

  17. The scrollbar is outside of the header and footer, so, is some users would not take it as a “frame”?

  18. September 6, 2006 by Roger Johansson (Author comment)

    Sebastiaan: I’ve looked at PIE but didn’t find anything that cures this bug. The safest workaround seems to be avoiding to change the background or borders of links on :hover.

    zakoops: Ouch. Yes, that is indeed a problem. Guess I’ll need to look into using the IE7 library for IE6. That will probably fix the “shrinking content area” problem too.

    Realazy: Perhaps. But do they need to?

  19. In our web applications we encounter these IE problems constantly. The only solution I found is to conditionally include an IE6 style sheet (like you do) and use CSS expressions to define the buggy IE properties.

    Problem is solved by replacing the 100% width by: width:expression(document.body.offsetWidth + ‘px’);

    I know it’s not very clean but I don’t bother using expressions when they reside in an IE only CSS-file and not in a js-file or other stylesheets. I find it sometimes more readable than many CSS-hacks.

    Often I find myself spending hours trying to solve an IE rendering problem with CSS while this solution solves it in minutes without having to bloat my markup with extra elements and wrappers.

  20. IE6 behaves properly for me, IE7 too. No strange behavior at all. Just FYI.

  21. “Internet Explorer for Windows up to and including version 6”

    Shouldn’t your conditional (at the IE6 Workarounds paragraph) then read: <!--[if IE lte 6]> ?

    wbr,

    B!

  22. September 6, 2006 by Roger Johansson (Author comment)

    Yoeri: Thanks, I’ll take a look at using expressions. It doesn’t bother me either as long as they’re in an IE-specific stylesheet.

    Mats: Yes, I removed the bug trigger from the examples. The problems with positioned elements in the scrolling area (as mentioned in comment 16 still remain though.

    Bramus: No, since the workarounds only work for IE6. Maybe I should rephrase that a little to make it clear.

  23. Thank you for all the help with using CSS to make a “framed” site. I’m just stuck trying to figure out how I can create a site that is centered, has a fixed header, two fixed sidebars (one on the right and one on the left), a fixed footer, and a scrolling content in the middle?

    I can get it to have the header and the footer, but I’m stuc with the centered, fixed sidebars…

    Any help would be greatly appreciated.

  24. @wraith: To create rather complex structures while sizing in both height and width I always use absolute positioning like:

    CSS:

    div#head { position: absolute; top: 0; right: 0; left: 0; height: 100px; background-color: Aqua;}

    div#foot { position: absolute; bottom: 0; right: 0; left: 0; height: 100px; background-color: Aqua;}

    div#left { position: absolute; top: 100px; left:0; width: 100px; bottom: 100px; background-color: Fuchsia; }

    div#right { position: absolute; top: 100px; right: 0; bottom: 100px; width: 100px; background-color: Fuchsia; }

    div#content { position: absolute; top: 100px; right: 100px; left: 100px; bottom: 100px; background-color: Lime; overflow: auto; }

    HTML:

    <body> <div id=”head”></div> <div id=”left”></div> <div id=”content”><h1>This is content</h1> </div> <div id=”right”></div> <div id=”foot”></div> </body>

    Notice that I use both top and bottom and left and right while applying absolute positioning, this prevents me from using margins and paddings to get everything in the right position. This works fine for Firefox and Opera. In IE I use a conditional css-file setting the widths using expressions. I notice that using the top, bottom, left and right in the same declaration is a rather unknown feature …

    Excuse me for not formatting this post correctly … these are my first posts on this site …

  25. Nice update of the old technique, Roger.

    @Wraith: here are some resources that may help you: http://www.alistapart.com/articles/holygrail/ http://www.positioniseverything.net/articles/onetruelayout/ http://www.alistapart.com/articles/fauxcolumns/

    Good luck! :)

  26. September 6, 2006 by Albert

    My first post here ;-)

    I tested Example 1 on IE7.0.5700.6 (RC1), and noticed that as soon as the page is resized (Ctrl+Scrollwheel), the header/footer is no longer 100% width. No problem with all other browsers I have (IE6/Safari/FF/Opera).

  27. September 6, 2006 by Roger Johansson (Author comment)

    Albert: Well, the page zoom thing in IE7 is quite quirky and weird if you ask me, so I’m not surprised. I much prefer the way Opera zooms. Anyway I don’t think it’s a big deal in this case.

  28. Thanks, Roger. This is just what I needed. :)

    I love your site’s new look. Nice work!

  29. Thank you all for your help! I’ll post a link to the code that I come up with when I’m done so that anyone that needs something similar can use it…

  30. September 7, 2006 by Markus

    Some months ago, I managed to create something very similar. It works in IE 5.5, IE6, IE7 and in proper browsers. Due to the fact that it does not try to emulate fixed position in IE<7, this solution is not affected by the problems of the workaround. Instead, it achieves the desired effect by “squeezing” the viewport (that is, adding vertical paddings to the html(IE6)/body(IE5) element).

    However, I haven’t tested that :hover thing.

  31. September 8, 2006 by Martin Kristensen

    In Ei6, if you mouseover the link (the one that says “css frames v2 …”) and scroll the page down (mouse scroolwheel) the “topframe” disappears!

  32. September 8, 2006 by Roger Johansson (Author comment)

    Markus: Ah, interesting. I’ll see if I can use that here somehow.

    Martin: Lol, yeah it seems IE6 is borked. Will try to find a workaround as soon as time allows.

  33. Thanks for a good example code of this css trick Roger! I only got one problem I can’t understand, I’v only used the bottombar and when I’m applying a background color or image it gets 100% width (which it should) but my background appears above the scrollbar.

    As always it works perfect in FF.

  34. One of the problems that I have found with the above methods is related to the fact the CSS relies upon the header and footer being a fixed size (or contain a pre-determined number of lines of text). If the text wraps to an extra line, the header and footer can grow to accomodate the content (at least in IE unless oferflow-y is set to something other than visible). The text may wrap because the user has changed the font size or because longer content was added.

  35. September 8, 2006 by Roger Johansson (Author comment)

    Ok, I’m not wasting any more time on this now. I have tried Dean Edwards’ IE7. I have tried expressions. Neither solves the “disappearing scrollbar in narrow windows” and the “magically shrinking content area on link hover” and the “positioned content becomes fixed” bugs in IE6. So unless anybody has any brilliant suggestions, consider this technique to be of limited use until IE6 has been replaced by IE7. Or just treat IE6 as the defunct browser it is and put it in the same heap as its older versions.

    That’s progressive enhacement.

  36. Well, since you ask: I only hide the vertical scrollbar on html/body in IE/win for layouts like this. That solves the problem on narrow windows.

    The other problems in IE can also be controlled, but I regard the CSS only fixes too “conditional” so I usually end up simulating ‘position: fixed’ with a few mode-independent IE-expressions.

    Articles on the subject with demos and code: CSS only and with IE-expressions

  37. September 13, 2006 by Jason Reed

    This is a great solution, but I have to wonder- is there a good/easy fix for selects showing up through the header?

  38. September 16, 2006 by Roger Johansson (Author comment)

    Jason: I tested that and did not see any form controls show up through the fixed portions in any browser. Do you have a test case?

  39. September 17, 2006 by Jason Reed

    Roger- I just threw a into the example code you have posted.

    http://www.jasonreedwebdesign.com/clients/cssframeset/

    Check it out in IE6- other (standards compliant) browsers handle it fine.

  40. Bah! The first sentence of the post above should read:

    “Roger- I just threw a select into the example code you have posted.”

  41. Jason: You can not cover a form properly with another element in IE6, regardless of positioning-method. No easy fixes around AFAIC.

    Roger: An additional “speedfix” will improve behavior in IE6. The mode-independent version…

    html, body{ background: #fff url(foo) fixed; }

    (the one I mention in my article is for quirks mode. I’ll have to update…)

    This speedfix can of course be an actual fixed background-image, which is what I use on my pages.

  42. Georg: Are you aware of the transparent iFrame method people are using to solve a similar problem with dropdown type menus and select tags in IE? Maybe something similar could be done here.

    Select Free Layer

    I tried implementing something like this, but as soon as you scroll, it seems to clear out the iFrame. However, when you resize the window (forcing a redraw, I guess) the method works again.

    I was just hoping that perhaps there was a cleaner method of accomplishing this.

  43. September 17, 2006 by Roger Johansson (Author comment)

    Jason: You are right, there is indeed a problem with form controls in IE6. Weird - I’m sure I had it working during development.

    Georg: I tried the speedfix but didn’t notice any difference, so I left it out.

  44. Jason: I’ll look into it and see if I can find a reliable and stable solution - when I find the time.

    Question: does latest IE7 release-candidate stack the elements correctly with a form present?

    Roger: IE6 needs a background-attachment: fixed on the html element too when in standard mode. That’s why my original example didn’t work for your test-pages. I have tested it and updated my article, with a note.

  45. September 17, 2006 by Roger Johansson (Author comment)

    Georg:

    does latest IE7 release-candidate stack the elements correctly with a form present?

    Yes. So I don’t know if I would bend over backwards to find a solution for IE6.

    IE6 needs a background-attachment: fixed on the html element too

    That did the trick. Scrolling is much snappier now. Thanks!

  46. IE7 does handle things correctly- but it still doesn’t help my clients in the meantime :)

    The Select Free Layer should work somehow, but I suspect that moving the scrolling element out of its normal position causes some wonkiness when the window scrolls- it somehow resets the iframe.

    Georg: if you (or Roger) find a solution, I’ll be eternally grateful! I’ve been having a heck of a time making this work.

    If it would be helpful, I can also post a test case with the iframe in place.

  47. Jason: Ok, if you must :-)

    Here’s a test page (yours actually) with the added iframe trick. All styles in page-head. Not exactly what I call a pretty solution, but it works.

    The reason I asked about IE7 is that it would be a waste of time to fix IE6 if IE7 broke it again. Temporary fixes for a broken version is OK.

  48. Georg: Thank you! I’ll have to look at your version in depth and figure out what you did differently.

    I agree with your point about IE7- thankfully, MS seems to be working on a few of the bugs that have been driving me nuts.

    Thanks again, and thanks to Roger for a great layout.

  49. September 19, 2006 by Sandra

    Hi, I’m trying to master this layout, so I wanted to follow the “Peter-Paul Koch in 100% height” link, but it’s a 404… I wonder if maybe it can be found somewhere. Anyway, this is a really great layout, thank you very much.

  50. September 19, 2006 by Roger Johansson (Author comment)

    IE7 does handle things correctly- but it still doesn’t help my clients in the meantime :)

    True. So I hope the iframe trick Georg posted works for you. I haven’t tested it myself so I don’t know if it affects accessibility in any way.

    Sandra: You’re right about that. I know that PPK recently redesigned his site, so that is probably the reason for the broken link. I had a quick look around his site but couldn’t find the new location for that document… maybe it will show up again eventually ;-).

  51. To complete the accessibility side of those IE-fixes…

    The ‘iframe trick’ may mess up a form if user have checked IE6’ accessibility option - ‘ignore colors in web page’. The form may then become invisible even when it’s not hidden behind the header.

    Looks like those IE-filters are handled quite unreliable.

    Also, the iframe need neither be absolute positioned nor have a negative z-index. It’s the ‘filter:mask() on an iframe that does the job, so it doesn’t matter how it is positioned. I’ve floated the iframe and made it take up no space in my latest tests - that’s ‘removed float’, and it’s easier to make the fix line up inside the fixed header that way.

    I’ll add the complete ‘floating iframe trick’ to my article when I have tested all variables a bit more. It’s a dirty trick, but some may still need it.

  52. September 23, 2006 by KnutKnuto

    Is there any cunning way to use flash movies with css frames? I just tested it and when I scroll the damn thing just goes on top of the of the ‘frames’.

  53. I’ve been looking for a way to avoid using frames, but this isn’t helping. The only reason I use frames is to have static content that updates dynamic content, i.e. one frame opens links in another frame, which is very useful to save reloading menus, particularly when image based, with each page.

    It looks like my only option is to use PHP server side includes, unless anyone can tell me otherwise.

  54. October 12, 2006 by Wangmo

    Hello, I’ve been following the discussion above and have succeeded in making IE6 behave properly. The only hitch in this glorious world, is that when I click on a link that’s anchored in the same page the header disappears. Has anybody encountered this problem? And if so, how was it resolved?

  55. October 26, 2006 by Raul Valadez

    Good and working! Except if I try to put a border on #wrap:

    wrap{border-right:5px solid #93371b;}

    If the contents are big or large enough to need scrolling, the border don’t grow when scrollling

    One solution is to put an overflow: auto; on #wrap but maybe complicate the things too much with explorer. (I’m working on linux, firefox now)

    Some tips?

  56. October 26, 2006 by Roger Johansson (Author comment)

    Wangmo: Sorry, I don’t know of a workaround for that (which does not mean that there isn’t one!).

    Raul: Wow, that looks odd. Not sure why that happens.

  57. Hi this tutorial helped me a lot antiframing my page.(still wokring on it from Hungary) So thanks Roger and Georg.

    Maybe it would be better if you include this two lines at: The IE workarounds. Because it took the most time for me too find why is it wokring for me weird in IE6

    html, body {background:url(foo) fixed;}

    thanks again.

  58. October 29, 2006 by Roger Johansson (Author comment)

    Janos: Yup, I forgot to update the article with that. It’s there now!

  59. Hello again, I’ve posted an example of the problem on a test page - note that this is for an IE only intranet, hence the fact that it doesn’t really work in any other browser at the moment. Better to iron out the bugs in one before moving on to the other. Anyway, I thought it might make more sense with a concrete example. Ideas? Thanks again. Nice to know that it’s not necessarily a simple solution.

  60. November 22, 2006 by macinfo

    I prefer CSS over frames in almost any case, but not all framed sites are bad, one positive example that comes to my mind quickly is: apple-history.com

    As Realazy mentioned, I also don’t like it, that the scrollbar in this CSS example goes beyond the scrollable area.

    macinfo

  61. This full-height layout is great. I’ve adapted it for a client’s website: works in Firefox 2.0 and works in IE7. However, my layout doesn’t work in IE6 (which is, unfortunately, what she and her parents and nearly everyone else use)! Can anyone spot my error?

    My layout goes a couple of steps further than described above, as it calls for a fixed background image as well as a fixed navbar. In IE6, the navbar doesn’t display at all, and the background image does not fix itself to the viewport. Any ideas? Thanks!

    Site: http://www.havetotango.com

    STAN

  62. In case anyone’s interested, in regard to my problem listed in Comment 61 above, I did the following:

    1. Removed “html,” from the line to fix the background image.
    2. Fixed the position of the navbar through the option laid out here: http://web.tampabay.rr.com/bmerkey/examples/fake-position-fixed.html

    Thanks, everyone! STAN

  63. Hi all, This css alternative to frames looks great. We are going to to implement it on our mobile website www.film-tv.com We need to alter it for the windows mobile browser stuff though. All tips welcome. Thanks!

  64. MAYBE YOU MISSED THIS…

    But a smart guy solved all these problems way back in post 13.

    Here’s the code. Just view source and copy it. It works!

    http://friendlybit.com/files/frames/columns.html

    — SK

  65. I know it’s been a while since this was posted and the last comment was made, but I’m wondering if anyone has done this with just the footer working this way and the header and content scrolling behind it? I’m trying to get it to work that way but when the content is shorter than the viewport I still get a scrollbar. Tips, helps, examples?

  66. Very nicely done. This eliminates the horizontal header and footer frames, but how can I eliminate veritcal if I have two long lists that I want the user to be able to scroll independently? I now have two vertical frames with CSS headers.

  67. I was trying to set a top border to the footer but it messes up the content frame somehow. Has anybody noticed this? (by the way I am new in CSS so it is possible that I might be doing something wrong…) Any help is appreciated.

  68. I think you may have a deadlink to article “Height 100%” link: http://www.quirksmode.org/css/100percheight.html

    Thanks for the article.

    -mpare

  69. I’ve been revamping my company’s website and am using the CSS Frames technique because, truthfully, I just couldn’t see any reason not to. All of the arguments against using frames made lots of sense to me, but I like the idea of having the page organize with a header, footer and static menu bar on the side.

    I’ve been using parts your technique here and a mix of other stuff I’ve seen elsewhere (including some stuff from Stu Nicholls) and I’ve run into a snag.

    I finally got it to appear nicely on the screen. I use dhtml/java for my menu bar on the left, but did make it available to users that have disabled scripting. Right now, the only thing that I haven’t duplicated without scripting is in the footer where with scripting I show the last updated date/time and the current URL. That, however, isn’t the snag I referenced….

    The problem is printing. When I hit print preview, I am only show one page will print and it shows the vertical-scrollbar…. your example here appears to print all right.

    Would you mind taking a peek at my CSS and let me know what I need to change so it’ll print the content continuously? Is there a way to create another view for printing automatically (without having a “Print Friendly” button somewhere on the page), i.e, if the user hits Ctrl+P is there a way using CSS to print the contents without printing the header, footer and sidebar?

    Thanks!! I really appreciate this technique as it gives my pages a really professional appearance that is also search engine & bookmark friendly.

  70. February 17, 2007 by Roger Johansson (Author comment)

    TravisM: I think you need to specify a print stylesheet that overrides the CSS frames behaviour. That should take care of the problems you’re having.

  71. Thanks, Roger!

    Your resources here have been invaluable. I’ll have to hunt around for “print stylesheets”, but I have no doubt I’ll be able to find something on them and their use.

    I showed my wife the page and she thought the content area was too bright, so I added a graphic so the gradient continues in the content area.

    I’ve been developing a second version right alongside this one that has the menu horizontally across the top and no sidebar, but I’ve been having all sorts of trouble incorporating a noscript version of the menu.

    I think ultimately, I’ll use this version.

    Thanks again.

  72. February 23, 2007 by Matt fIRd

    I’ve tried my best to use this technique and try to implement it in the joomla template… which need 3 columns and the first 2 column nested… but i failed… yeah… it really shows that i dont really know how to code… who cares… i’m an architect ;p but can someone help me…

  73. February 27, 2007 by yaqoob

    a good helping article for adevelper like yaqoob ansari

  74. March 1, 2007 by Ken Wagnitz

    OK, I want to replace my frames with CSS and/or javascript. So where is the splitter bar???

  75. Just a “bug” … but when you do an anchor … the selected anchor doesn’t take the height of the header :( … so when clicked, the page jumps to the anchor but becomes hidden. Is there a way to add (by JS or CSS) this : if the header = 100px, to add 100px to the anchor : like that, it simulates “0” and the anchored section is not hidden by the header.

  76. March 19, 2007 by JPTN

    Great CSS info.

    I’ve been looking at v1 of this (fixed width, Ex #2) and wanted to implement a sidebar but for some reason, it won’t go 100% height and the main content wraps underneath the sidebar once it stops.

    Any help or information is appreciated.

  77. March 22, 2007 by Pete

    Great article, this has really helped me out. Just one problem though: in IE6 the background scrolls with the content, which it doesn’t in IE7 or FF. Not a big problem with a repeating background like in the example but I need mine to be static. I’ve tried setting the background-attachment to fixed in the ie stylesheet but this doesn’t seem to have helped. Can anyone help me with this please?

  78. April 9, 2007 by Atle

    I´m trying to put some flash content in there, but it´s not working that well. I want it to be centered, and scroll UNDER the #header, but that seems impossible? It always ends up on the left side, and above the #header …

  79. I may be wrong, but I believe the speed fix doesn’t rely on the “background-attachment” property, only on “background-image”. In my testings, I found out that * html {background:url(foo);} works just fine.

  80. April 29, 2007 by Albert

    @Rod: Regarding an anchor that scrolls behind the header, I have worked out two solutions, but both only work in IE:

    1- Give the content a relative position with a top according the height of the header. And replace the padding-top to padding-bottom in de wrap.

    2- Use a dummy anchor, and use its onfocus-event to trigger a javascript-function which scrolls the window negatively.

    If someone has more ideas, I gladly hear from you, cause FireFox and Opera both don’t take the position into account and don’t get the onfocus event.

  81. April 29, 2007 by Albert

    O, I just found out the solution for FireFox and Opera:

    3- Use a dummy anchor with a padding-top equal to the height of the header.

    Unfortunately, this doesn’t work in IE, so it will be a combination of 1 and 3.

    Succes!

  82. May 3, 2007 by Rick

    Hey all-

    I too like this method. I was wondering, there obviously (as per the “update” notices) have been some changes based on, for example, folks’ comments here. So, is the code at the top of this page the sum total of the changes, or does it still need to be modded by reading through the posts?

    (I am a newbie!)

    Thanks, -Rick

  83. I have tried a design with header, full content and footer, but I have got many troubles with the browser. Sometimes the FF doesnt show correct, sometimes the IE. But not both of them. Now it works correct in both browser. Many thanks.

  84. May 25, 2007 by Diane

    So here’s the challenge:

    Getting this method to work in Windows IE (6 & 7) when the content of one of the fixed divs is a flash movie.

    Compare:

    http://s19008.gridserver.com/Templates/tester1.html http://s19008.gridserver.com/Templates/tester2.html

    tester1.html shows how nicely it all works when the #footer div, in this case #nav, contains a JPG.

    tester2.html shows the most bizarre behavior when the #nav div contains a flash movie. The #content div scrolls up, but the flash-containing div actually scrolls in the opposite direction, and the scrollbar starts to compress vertically from both ends…WTF?!? If I set overflow:hidden; on the #nav div, it only scrolls in the opposite direction of the content until the end of the content.

    I’ve played around with a bunch of parameters—-the movie’s wmode (needs to be opaque to go behind the header when window is resized), exported it in various flash versions, and embedded it with and without the AC_RunActiveContent.js fix for IE7—-but nothing related to exporting/placing the flash movie itself seems to make any difference.

    This leads me to believe there is some sort of interfacing problem between the IE.css “top” definition that fixes the #footer div, and the Flash-containing div. How exactly is a Flash movie different from an image in terms of how it fills a div element?

    Sigh.

    Any help at all would be hugely appreciated.

    Many thanks, Diane

  85. May 27, 2007 by ma3

    how do i make a frame that is exactly in the middle of the page and it is fixed, where the other half “the right one” has the content and the scroll?

    can any body write me the xhtml code?

  86. I’m working on this site http://vacationsitka.com/frames-tmplte.shtml. A client wanted his site converted to frames. If you click on any of the links, they’ll take you to that old site. What I’m having problems with is the frames-tmplte page. CSS is here:

    http://vacationsitka.com/Scripts/new-frames-global.css http://vacationsitka.com/Scripts/ie.css

    Two issue: IE6 - won’t scroll and IE7 - footer is off to the right. Looks great in Firefox, of course. Anyone have any ideas?

    TIA…

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.