CSS Page Layouts

This is a project I created many years ago, and haven't touched in about 10 to 13 years. It's mainly here for posterity, but if you still find it useful (and if it still works) then by all means feel free to make use of it. Any references to "6 times 9" are because that is the retired website where I was previously hosting things like this.

It's worth noting in particular that these were made long before HTML5 was a thing, so these days there are better ways than nested DIVs with thematic IDs...

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.

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

I originally created this project to use for 6 times 9 (prior to moving it to Google Sites to save on hosting fees). A such the examples back then just changed the layout the website was set to use. Since doesn't use these layouts, the representative thumbnails will have to suffice.

CenterSquare

CenterSquare Layout

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

CenterColumn Layout

The basic CenterColumn layout; no menu.

Left InlineMenu

CenterColumn Layout with 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.

Right InlineMenu

CenterColumn Layout with 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.

Left Menu

CenterColumn Layout with 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

CenterColumn Layout with 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

CenterColumn Layout with 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

ContentColumn Layout

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 layour with three options for menu placement

FullWidth Left

FullWidth Layout

A full-width layout with a left-positioned, 200-pixel-wide menu. The content does not flow around the menu.

FullWidth Right

FullWidth Right Layout

A full-width layout with a right-positioned, 200-pixel-wide menu. The content does not flow around the menu.

FullWidth Tabs

FullWidth Tabs Layout

A full-width layout with the menu positioned at the top for use as tabs. It includes basic CSS to convert a list into tabs.

Download

To download 6 times 9 CSS Page Layout Templates just right-click and choose "Save As" (or the equivalent for your device/web browser).

Last updated: (version "Echo")