CSS Fixed Positioning Solution to one of the Frame Problems

Google+ Pinterest LinkedIn Tumblr +

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, text), 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

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;

Sidebar for links 
Main Content goes here 




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

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.

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.



About Author

Leave A Reply