Default CSS Layout
- The side column width is constant - all other widths are determined by the window width.
- All heights are determined by their content.
- The page allows scrollbars on the window.
- Uses a simple 'equlized columns' technique.
Javascript Layout
- 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.
Summary
This demo uses Javascript for layout but downgrades to a CSS layout if Javascript is disabled or the required objects are not present. It is completely accessible without Javascript. This demo is a modified version of layout4.
Some important points illustrated by this demo:
- The CSS in 'layout5d.css' provides the CSS (default) layout.
- The CSS in 'layout5x.css' over-rides the default CSS and supports a Javascript layout.
- .