CSS Page Layouts
This is a project I created many years ago, and haven't touched in about 11 to 14 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...
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.
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">
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.
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 richardwinskill.uk doesn't use these layouts, the representative thumbnails will have to suffice.
A 400 pixel square in the middle of the page. The header, content, and footer DIVs have a fixed height and an automatic overflow.
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.
The basic CenterColumn layout; no menu.
The CenterColumn layout with a left-positioned, 200-pixel-wide menu with the main content flowing back under the menu when it ends.
The CenterColumn layout with a right-positioned, 200-pixel-wide menu with the main content flowing back under the menu when it ends.
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.
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.
The CenterColumn layout with the menu positioned at the top for use as tabs. It includes basic CSS to convert a list into tabs.
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.
A full-width layour with three options for menu placement
A full-width layout with a left-positioned, 200-pixel-wide menu. The content does not flow around the menu.
A full-width layout with a right-positioned, 200-pixel-wide menu. The content does not flow around the menu.
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.
To download 6 times 9 CSS Page Layout Templates just right-click and choose "Save As" (or the equivalent for your device/web browser).