Page Layout Examples
JavaScript Switching & No Colours
As well as the structural CSS, the examples below use the same extra CSS as the rest of the site.
To see what the layouts look like with just the HTML and the structural CSS use the raw example. It also uses JavaScript to allow you to switch between layouts.
Note: The background colours - which are not part of the structural CSS - have been left to more easily distinguish between the blocks. The background colours is the only CSS applied that does not come from 6x9layout.css.
CenterSquare
A 400 pixel square in the middle of the page. The header, content, and footer DIVs have a fixed height and an automatic overflow.
CenterColumn
A 750-pixel-wide, horizontally-centered column starting at the top and extending down as far as the content requires. None of the elements have a fixed height. There are a few variations with different positions of a menu.
No Menu
The basic CenterColumn layout; no menu.
Left InlineMenu
The CenterColumn layout with a left-positioned, 200-pixel-wide menu with the main content flowing back under the menu when it ends.
NOTE: The background for the main DIV will now extend to enclose the menu (if the menu is longer than the content) in everything I can check except Internet Explorer (IE's just awkward like that...).
Right InlineMenu
The CenterColumn layout with a right-positioned, 200-pixel-wide menu with the main content flowing back under the menu when it ends.
NOTE: The background for the main DIV will now extend to enclose the menu (if the menu is longer than the content) in everything I can check except Internet Explorer (IE's just awkward like that...).
Left Menu
The CenterColumn layout with two distinct columns: a left-positioned, 200-pixel-wide menu; and the main content. The content does not flow around the menu.
Right Menu
The CenterColumn layout with two distinct columns: a right-positioned, 200-pixel-wide menu; and the main content. The content does not flow around the menu.
Tabs
The CenterColumn layout with the menu positioned at the top for use as tabs. It includes basic CSS to convert a list into tabs.
ContentColumn
Similar to the CenterColumn layout, except the header and footer are full-width and it is only the main content that is 750 pixels wide, and centered.
FullWidth
A full-width layout with a left-positioned, 200-pixel-wide menu. The content does not flow around the menu.
FullWidth Right
The FullWidth layout with a right-positioned menu.
FullWidth Tabs
The FullWidth layout with the menu positioned at the top for use as tabs. It includes basic CSS to convert a list into tabs.