CSS Fixed Positioning Solution to One of the Frame Problems

Introduction
Search engines do not work well with pages that have HTML Frames. HTML frames serve two purposes: 1) To keep a panel of the web page fixed while another is scrolled. 2) To keep a panel fixed, while a web page is downloaded and displayed in another panel, replacing a previous web page. Today the CSS Fixed Positioning Property can be used for the first purpose, thus avoiding the use of frames, and making your web page friendly to Search Engines.

I show you how to do that in this article. This technology works with new browsers, browsers that were produced within the last three years. It does not work with old browsers. I have just written an article titled, Understanding CSS Fixed Positioning, in this blog. I advise you to read that article before reading this one. Here I will only summarize what was in that article. To get to that article, type, Understanding CSS Fixed Positioning, with my name, Chrys, in the Search box of this page and click Search. If you have a Google Search box, use it.

Note: If you cannot see the code or if you think anything is missing (broken link, image absent), just contact me at forchatrans@yahoo.com. That is, contact me for the slightest problem you have about what you are reading.

Main Features of Fixed Positioning
With Fixed Positioning, an HTML element is kept fixed in the client area (viewport) while another is being scrolled. You can still keep all elements fixed in their positions with no one scrolling.

Fixed Positioning needs a CSS property called, "position". The value for this property is always, "fixed".

Fixed Positioning needs another CSS property called, z-index. The value to this property is an integer. HTML elements can actually be placed in front of one another, covering one another as seen by the web page user. The BODY element is considered to be at a z-index value of zero. The elements placed in the BODY element normally are considered to be at a z-index value of 1. You can give elements z-index values from 2 upward. The element with the greatest value is the one seen foremost by the user. The other elements may be covered by elements of higher z-indices.

Fixed Positioning needs the CSS top, left, bottom and right properties also.

Sidebar, Header and Content Layout
I wrote an article once titled. Layout with DIVs instead of Frames for HTML. In that article, I explain how you can use DIV elements for the layouts that HTML frames offer. That is fine and the technology in that article works with all browsers: new and old. The technology here works only with new browsers (browsers produced within the last three years).

CSS2 was recommended by W3C in 1998. The Fixed Positioning rule was part of the specification. It is of recent that browsers are implementing it. There is no CSS3 recommendation yet; even when it will be recommended, it will take time before browsers will implement the CSS3 specification rules.

In this article, I use the Sidebar, Header and Content Layout, for illustration. In this layout, you have the header panel that takes the title of the web page, the logo and can have a banner. You have the sidebar panel on the left, below the header, which takes the links for navigation of the web site. You have the main panel below the header panel and to the right of the sidebar. This takes the main web page content. In the past this layout was easily achieved using HTML frames. However, because of the problems posed by frames to search engines, today you can have this layout with DIV elements easily without using frames, thanks to the implementation of the Fixed Positioning feature by new browsers.

In the article, Layout with DIVs instead of Frames for HTML, you do not succeed in using the DIV elements (without using the Fixed Positioning feature) easily. However, the advantage of the designs in that article is that the designs work with old and new browsers. Using DIVs with fixed positioning, works only for new browsers; that is what is explained in this article. I tested the design here with Firefox 2, Netscape 8, Opera 9, and Safari 3

Try the code first to appreciate what is going on before we look at the explanation below:

body {overflow:hidden}
#header {position: fixed; width: 100%; height: 15%; top: 0; left: 0; border:solid 1px blue; z-index:2}
#sidebar {position: fixed; width: 20%; height: 85%; top: 15%; left: 0; border:solid 1px blue; z-index:2}
#main {position: fixed; width: 80%; height: 85%; top: 15%; left: 20%; border:solid 1px blue; overflow:scroll;
z-index:2}

Hearder
Sidebar for links
Main Content goes here

here

here

here

In the design, I have used borders to demarcate the DIVs, but their presence is not obligatory.

The Scroll Bars of BODY Element
With this layout, normally, only the main panel has scroll bars. So we do not need the scroll bars of the BODY element. You take off the BODY element's scroll bars with "overflow:hidden" in the CSS rule for the BODY element.

The position Property
All the DIV elements have the position property with value, "fixed". That is primarily what gives the DIVs the fixed positioning feature.

width, height, top and left properties
The values for these properties are with respect to the top and left edges of the client area of the web page and not with respect to the edges of some block-level element. I have used the percentage unit in other to cover just the whole client area. Using the pixel unit would cover less or more of the client area. Always use the percentage unit when you are considering a global view of the client area or web page.

z-index property
With normal designing, the z-index is considered to be at z-index position, zero; the elements of the BODY element are considered to be at z-index position 1. The elements for fixed or absolute position properties can start coming at z-index position 2, upward. So, the fixed position DIVs are at z-index position 2, in the web page here. Any other layer in this web page should be from z-index position 2 and above.

Scroll bar for Main Panel
With this layout only the main panel normally has scroll bars. This is done with the "overflow:scroll" in the CSS rule for the DIV of the main panel.

Percentage values in Code
If you add the percentage values in a line for the different DIVs, you will have 100% for the total width or height of the client area; this avoids overlapping of the DIVs.

Conclusion
HTML frames serve two purposes. One of them can be served by CSS Fixed Positioning with HTML DIV elements. In the article, Layout with DIVs instead of Frames for HTML, which is for old and new browsers, the DIV panel elements can be considered to be at z-index level 1. Here the corresponding DIVs are at z-index level 2. The technology illustrated in this article is for new browsers only.

Chrys