ucms.php - Sample Styles - Three Columns

The Style sheet information is stored in a page called 'styles.css'.

As the page is built, <div> tags are added using the page name for the ID and (in some cases) the Page Type for the Class.  This means that the style sheet 'styles.css' can contain overrides for each type of page or style in the site.

In this style, as we could not always be sure of the height of the elements within the Left and Right Columns, we 'pin' the Columns to the main containing div using 'position absolute' and allow the column contents to flow naturally.

Rather than try and account for the different browser methods of handling positioning, we pin the left column to the left edge, the right column to the right edge and allow enough margin between columns so that minor differences in column spacing to not detract from the page.

• Style Samples
• Three Column
• example2

Three Columns

This page has Three Columns, the Page Style is 'ThreeColumn' and the simplest way to add the style was to copy the '.plain' portion of the styles.css page. Then, using a text editor, replace all of the '.plain' prefixes with '.ThreeColumn', before pasting the new styles at the bottom of 'styles.css'.

After that, it was easy to change the dimensions of the middle column and it's left margin:-

'.ThreeColumn #main { width: 550px; margin-left: 170px; }'

The rest of the page remains the same.

By using the PageType as a 'div class' in this way, each new style begins with a completely clean sheet.