The basic page layout explained
This is intended to be an accessible, fluid, two/three column layout that works in all modern browsers (and in IE5 with a few hacks). The default stylesheet for this page is unicursal–main.css.
The basic layout consists of four non–floated containers. These are held within another container — ‘.centerpage’ — which centers the page horizontally at higher screen resolutions.
The page width is fluid between maximum and minimum values defined in the stylesheet.
The Header
<div class="header">
<div class="skip">
<a href="#content" accesskey="s" title="access key s">Skip Navigation</a>
</div>
header content here
<div class="spacer"><!-- --></div>
</div>
The header is a simple container. The ‘Skip Navigation’ link is useful for those using screen readers. It is hidden using the ‘.skip’ class.
Here and elsewhere the spacer ensures that the container always extends below floated content.
The Menu Box
<div class="menubox">
<ul id="nav">
<li><a href="index.html">Home</a></li>
</ul>
more content here
</div>
The menu box is positioned absolute left. An unordered list is used for the fly–out menu (only one button shown above).
The Main Box
<div class="mainbox">
<div class="mbtl"><!-- --><div class="mbtr"><!-- --></div></div>
main content here
<div class="spacer"><!-- --></div>
<div class="mbbl"><!-- --><div class="mbbr"><!-- --></div></div>
</div>
The main box has a wide right margin to provide space for the menu box.
The rounded corners are created using four images in the stylesheet — in classes ‘.mbtl’, ‘.mbtr’, ‘.mbbl’ and ‘.mbbr’ respectively. This is a bit of a bodge, using non–semantic XHTML, but the best method I have found so far.
The Footer
<div class="footer">
footer content here
<div class="spacer"><!-- --></div>
</div>
The footer is another simple container.
Things to note
The ‘.mainbox’ column should be the longest
If ‘.menubox’ is the longest its content will flow below the ‘.centerpage’ container. To prevent this ‘.mainbox’ is given a minimum height.
