CSS Based Layout Templates

Each of these templates  uses a css based layout with the exception of one. The templates use an XHTML transitional doctype and have an external stylesheet. You are welcome to use them as a basis for site layout as is or change them as needed. Changes to colors, font families, font sizes and such should be made within the external stylesheet.

Clicking on the link under the template will take you to the full size template.

Screenshot Green 3 Column Alternate Layout.
Green 3 Col Alternate
Fixed Width Layout - Equal Height Cols
Added November 2013
Download Green 3 Column Template

Screenshot Green Three Column template.
Green 3 Column
Fluid width Layout
Revised November 2013
Download Green 3 Column Template

Screenshot April Daisies template.
April Daisies Template
2 col fluid layout
Download April Daisies Template
Mobile Version Available

Screenshot Blue Right Column Layout.
Right Column Layout 2 Template
Fluid Layout
Download Right Column2

Screenshot Ocean Blue Template.
Ocean Blue Template
Fluid Width
Download Ocean Blue Template

Screenshot of Right Column Layout Template.
Right Column Layout Template
fluid layout
Download Right Column Template

Our Family Blue template.
Our Family Blue Template
fluid layout
Revised November 2013
Download Our Family template
Mobile Friendly version

Our Family Rose template.
Our Family Rose
Fluid Layout
Revised November 2013
Download Our Family template

Triple Layered Background Layout.
Triple Layered Background Template
fluid layout
two inner tables for the content
Download Triple Layered Background template

Screenshot Multi Floral template.
Multi-floral Template
fluid layout
Revised: November 2013
Download Multi-floral template

The masthead on some of the templates uses a graphic image. Depending on MY time constraints, I will be happy to add a site title for you. Any of them can easily be converted to a dynamic web template if you are using FrontPage 2003 or Expression Web. Although created in Expression Web, they can be used with any WYSIWYG editor or any html editor for that matter.

The zipped files for each template contain:

  • blank template
  • external style sheet
  • all images used as part of the template

 Instructions for using the template files. The templates and the css validate.

If you want to change the menu used with a specific template, check the Menu Resources listed below.

The layouts are free for your personal websites. A link back to this site is appreciated. If you are using any of them for a commercial layout, a link back to this site is required.


These are basic templates. There are other styles you will need to add as you go along. Google is your friend. Learn to use it to find style info you might need. There are many css resources on the Resource page of this site. If you have questions, don't hesitate to ask. Investigate both the code and the style sheet. Make changes so you understand how the style sheet and coding relate to each other. Explore different menus using the resources included in the sidebar.

Pat Geary.

Additional Template

Sources for Seamless Tile Backgrounds

Remember if you use someone else's graphics you may need to link back to their site.

CSS Menus

Color Tools