Top
In a CSS2-supporting browser, this page shows how absolute positioning can be used as a simpler alternative to frames. The HTML element is given a height and width of 100%, which sets its dimensions to match the viewport (window). Four DIVs are then absolutely-positioned relative to the edges of the HTML element: (1) a top banner, (2) a left navigation bar, (3) a content block with automatic overflow to allow scrolling content, and (4) a bottom banner. Because dimensions are specified in ems, the width of the navigation bar auto-adjusts to accommodate the link text (change the browser's default font size to demonstrate this).
Unfortunately, MS Internet Explorer versions 5–6 require scripting to set the height of the navbar and content blocks. Without scripting, only the top and bottom banners are displayed, not the navbar or content block. The bug seems to be in IE’s support for overflow and bottom properties of absolutely-positioned elements. Also, in IE the size of an em does not change consistently when font size is changed in the View->Text Size options. Apparently, the size of an em applied to borders is always the em size for the ‘medium’ font. This, too, requires compensation via scripting.
Top section content. Top section content is typically found in the top section. Where is top section content typically found? Top section content is typically found in the top section. Top section content. Top section content is typically found in the top section. Where is top section content typically found? Top section content is typically found in the top section.Top section content. Top section content is typically found in the top section. Where is top section content typically found? Top section content is typically found in the top section.
Top section content. Top section content is typically found in the top section. Where is top section content typically found? Top section content is typically found in the top section.Top section content. Top section content is typically found in the top section. Where is top section content typically found? Top section content is typically found in the top section.Top section content. Top section content is typically found in the top section. Where is top section content typically found? Top section content is typically found in the top section.Top section content. Top section content is typically found in the top section. Where is top section content typically found? Top section content is typically found in the top section.
Here
Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content.
Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content.
Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content.
Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content.
Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content.
Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content. Here is section two content.
There
Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content.
Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content.
Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content.
Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content.
Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content. Here is section three content.
by David Perrell, derived from an example by Andrew N Marshall.
Created: 22 Dec 1997. Updated for standards compliance: 9 Apr 2006.