CSS Frames VS Standard HTML Frames

March 7th, 2006

Why not frames?

Nowadays frames are not quite as widespread as they used to be, which is good, since frames have quite a few drawbacks. You have probably heard of these drawbacks before:

  • The fundamental design of the Web is based on having Web pages as the atomic units of information represented by unique URLs. Frames break this unified model. With frames the atomic unit is a frame, not a Web page.
  • URLs doesn’t work: the address at the top of the browser no longer represents the information shown in the browser window.When a client want to send someone the URL of a document contained in a frameset they can’t just copy the address since that’s the frameset’s URL, not the Web page’s URL. I.e., the URL would refer to the initial state of the frameset.
  • Bookmarking is impossible in most browsers when frames are used. When you open the bookmark of a site using frames, it will refer to the initial state of the frameset.
  • There will also be problems for search engine spiders trying to index a site based on frames. Some of them, such as Lycos’s spider, index Web pages with error messages like “this site uses frames but your browser doesn’t support them”.
    Yes, there are ways around this, e.g. by embedding content into the <NOFRAMES> tag, but then one would have to manage the same content in two places in order to support both bots handling frames and those who don’t.
  • Most people surfing the Web use modern browser and most modern browsers handle frames correctly. However, there are still problems for these browsers when they got the URL to a framed site from a search in a search-engine since they are likely to reach documents that are taken out of context.
    There are ways around this too, e.g. by prevent viewing documents outside it’s frameset, or by storing information in the site’s robots file to let spiders know not to index child pages of the frameset. However, this would get the site less visitors.

Why frames – emulated frames?

One can use CSS to emulate frames. This is sometimes called “CSS frames”, “Emulated frames” or simply “Fake Frames”. There are different techniques to do this, where the most popular is to use position:fixed properties for some parts of the page, e.g. the header and footer. Since Internet Explorer doesn’t support position:fixed a workaround is needed. (You can read more on how to do this in the CSS Frames example page linked to at the bottom of this post).
CSS frames won’t get around all of the drawbacks with real frames, but close to. The main reason I choose to use CSS frames at some sites is that they allow you to always have pertinent information on the screen.


In my opinion it’s usually best not to use frames. However, if the site you are developing have alot of links and/or categories – such as an e-shop -, and if you like me feel that the functionality of frames is of importance, try to implement them with CSS frames.
To view an example of a CSS Frames implementation and read about how it can be implemented, see this page in the tutorial section of WebPelican:
CSS Frames Example/Tutorial

Entry Filed under: CSS

Bookmark with del.icio.us

Digg it?


  • 1  |  September 4th, 2006 at 12:45 pm by Martin

    You are right about the reloading, the hole page has to be downloaded from the server – not just the content frame.
    However, if big images such as banners are placed in – for example – the header, those would be cached by visitor browsers, hence only downloaded once.
    If no images are placed in the header, or footer, the overhead would anyhow be minimal.

    Don’t really see what you mean by overflow:scroll.
    In the CSS Frames example I use overflow:auto for browsers that don’t support position:fixed, which in this case give the same result as overflow:scroll, but in other cases would mean that the scrollbars would be visible automatically only when the element in question is overflowed.

    As for the position of the scrollbar it’s at the far right because I overflowed the body selector.
    I could have used a overflowed content wrapper to get the scrollbar right by the content area and use overflow:hidden for the body selector, but so far I haven’t managed to get that technique to be as cross-browser friendly as the one used in the CSS Frames Example.

  • 2  |  August 21st, 2007 at 5:58 am by Rob

    Great Example, but could you just explain one thng! I tried this with less content than you actually have and in IE6 the content gets pushed 10-20 px to the right of the header and footers. The same thing happens when you minimize the browser and start to minimize the page horizontally it gets to a point where the header and footer are stuck to the side of the browser but the content stops short and has a margin of 10 – 20px (again in IE6 but not Moz). Can this be fixed?

  • 3  |  August 21st, 2007 at 6:09 am by Rob

    Just like to add the same thing happens in IE if you change all widths from 720px to 100%.