Javascript Layout with No Downgrade

Summary

This demo is for an application that requires Javascript to be enabled and provides no accessibility downgrade. It will fit entirely within the window, allowing no scrollbars on the window.

Some important points illustrated by this demo:

• It does not use CSS floats. It is possible but, in general, resizing or repositioning floated elements will cause you many needless headaches. Floated elements work great in CSS-only layouts.
• Only the column elements have position:absolute, the other page-structure elements have position:relative. Embedding absolute elements within relative elements is a key concept. This allows the header and footer heights to be determined by their content.

Layout Features

• The side column width is constant - all other widths are determined by the window width.
• The header and footer heights are determined by their content.
• The column heights are determined by the window height minus the header and footer heights.
• A page margin can be applied.
• The page will fit within the window, allowing no scrollbars on the window.

Extra Features

Many extra features can be easily added. This demo illustrates one: when the window is resized to the point that the main column width is less than or equal to the side column width, then the side column is hidden.

Related Demos

layout5 - Js layout with downgrade