Equal Height Columns Site Templates

Updated: September 2011 to change the search page from Bing Search to Google Custom Search. Copyright updated.

IMPORTANT:  If you have downloaded this set of Site Templates before (8-30-2010), you will need to download them again. This is because if you use Zoom Text Only, the side column will break as you increase the size. Only the left columns and three column templates are affected by this.

If you have already used the template just insert the following style into the .css sheet.

#outerWrapper #contentWrapper {  clear:both; }

NOTE: The site template packages will work with ALL versions of Expression Web. They will also work with Microsoft FrontPage 2003 as well as SharePoint Designer 2007.

WARNING: If you are installing the templates using Expression Web 4.0, it is very important that you read Expression Web 4.0 Site Templates HTM/HTML Bug.

In addition to the twelve original site templates brought to you by Pat Geary, MS MVP -  Expression Web and Tina Clarke, MS MVP - Expression Web, we are proud to bring you Five new Expression Web Site DWT's based on Eric Meyer's CSS Sculptor for Expression Web. Each of these Expression Web Site Templates features equal height columns. No matter which of the columns has the longest content, the columns remain the same height. The secret? The contentWrapper <div> uses a background image with the colored column image the width of the column + the left and right side padding. The background color of the page is white.

They have been tweaked and both the css and html have been heavily commented to assist in the learning process.

Instructions for Installing and Working with the Site Templates.

Equal Height Columns Site Templates Gallery

Screenshot Two Equal Height Columns Liquid Layout.
Two Equal Height
Left Floated Columns
Liquid Layout
Download

Screenshot Two Left Floated Equal Height Columns Fixed Width to 1024px.
Two Equal Height
Left Floated Columns
Fixed Width to 1024px
Download

Screenshot Two Equal Height Right Floated Columns Liquid Layout.
Two Equal Height
Right Floated Columns
Liquid Layout
Download

Screenshot Two Equal Height Right Floated Columns.
Two Equal Height
Right Floated Columns
Fixed Width to 1024px
Download

Screenshot Three Equal Height Columns Fixed Width to 1024px.
Three Equal Height Columns
Fixed Width to 1024px

Download

Download the Equal Column Templates Set

Advanced Users

If you are a more advanced user and would like to have equal height columns without having to use an image, the folks from Project VII who develop extensions for Dreamweaver offer the following tutorial: PVII Equal Height Columns. You can download the working files from the Project VII site and edit the equal height columns template to work with the Project VII script.