Stand-alone‎ > ‎

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.

Examples

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.

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

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.

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

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

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

The FullWidth layout with a right-positioned menu.

FullWidth Tabs

FullWidth Tabs Layout

The FullWidth layout with the menu positioned at the top for use as tabs. It includes basic CSS to convert a list into tabs.

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>

To choose a different layout the only thing you need to change 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.

Feedback

I'd like to hear what you have to say about this or any other project on the site.

If you have any comments, compliments, or suggestions feel free to get in touch and let me know.

Download

Download the latest version using the link below.

Note that the first version uploaded here was last updated 2007-06-06. The date of any subsequent changes will be accurately reflected in the date shown in the table.

SelectionFile type iconFile nameDescriptionSizeRevisionTimeUser
ċ

Download
A pre-made set of simple and easy-to-use page layouts.  7k v. 5 23 Mar 2013, 21:53 Richard Winskill
Comments