CSS Page Layouts

About

The 6 times 9 CSS Page Layout Templates are designed to be a pre-made set of simple and easy-to-use page layouts. There is no text formatting or colours included; they are just page templates.

One of the rules I wanted the layouts to follow was that the HTML code should be the same in each case; I wanted to be able to change the layout of the page at a later date with almost no effort.

Using

Because I didn't want a change of layout to mean a change of HTML, the structure for every page is as follows:

<div id="container" class="centersquare">
    <div id="header">
        Header Section
    </div>
    <div id="menu">
        Menu Bar
    </div>
    <div id="content">
        Main Content
    </div>
    <div id="footer">
        Footer Section
    </div>
</div>

The only thing that needs to change to choose a different layout is the CLASS in the first DIV; the values for this are given in the actual CSS document.

For every layout except CentreSquare the Header and Footer will expand vertically to include as much content as you require. CentreSquare, on the other hand, has fixed heights for all elements, but the DIV for the main content will scroll to view content (as this page is doing).

NOTE: To achieve a neat layout, margins and padding have initially been set to 0 for all elements. Therefore paragraphs and headings will not have their normal spacing; you will need to take this into account in your CSS.

Examples

Examples and descriptions for each layout can be found on the Page Layout Examples page.

Download

You can download the CSS document by right-clicking here and choosing "Save As" (or the equivalent for your Operating System/Web Browser).

The current version is Echo (2007-06-06).

Please keep the "copyright" section at the top of the document intact, but feel free to credit yourself for any tweaks you make to it to suit your own more specific purposes.

There's now an RSS feed for easy notification of the infrequent updates to all 6 times 9 projects.

Feedback

I'd like to hear what you have to say about these layouts; I've only been able to test them in IE, Firefox, and Opera in Windows - I have no idea if they'll work on a Mac, for example...

If you have any comments, compliments, or suggestions feel free to email me and let me know