Scroll To Top

Enter a query to search our site. Note that you can use "*" and "?" as wildcards. Enclosing more than one word in double quotes ("CSS Layout") will search for the exact phrase.

PVII Equal Height CSS Columns A simple solution to a complex CSS problem

A modern solution to an old problem

View Finished Example Page

Instead of using background images, CSS hacks, or CSS that is not yet supported by all browsers, PVII Equal Height Columns uses modern DOM Script to work its magic. In this era of smartphones, tablets, modular content management systems, and Web widgets, the likelihood of your visitors viewing your page without script support is low enough to be almost statistically irrelevant. For those extremely rare cases where scripting is not supported, your page content will be fully accessible and your columns nicely styled at their natural heights.

Supports dynamic content height

If the height of any column ever changes, PVII Equal Height Columns will make all necessary adjustments—instantly. The script monitors your page every few milliseconds to see if the height of any column needs adjustment. Your column height will always be perfect. If your page includes a panel widget (like an accordion) that causes column height to change when you move from panel to panel, the system will adapt to the new height seamlessly.

Deploying PVII Equal Height Columns

Deployment is as easy as linking the PVII Equal Height Column script and assigning a class to a set of columns.

Download the work files

We've prepared a work folder for this tutorial. Please download it now: pvii-ehc-work-files.zip (updated 01-24-13).

Unzip the archive and move it to your defined Dreamweaver site. The archive contains the following files and folders:

Assign PVII Equal Height Columns to the tutorial work page

Locate base.htm inside your pvii-ehc-work-files folder and open it. The page has 3 columns. If you preview in a browser you will notice the columns end where their content ends. Like this...

Link the PVII Equal Height Columns script to your page

In base.htm, switch to Code View and locate the closing </head> tag:

Place your cursor on the blank line just above the closing </head> tag and paste this code:

<script type="text/javascript" src="p7ehc/p7EHCscripts.js"></script>

Assign the PVII Equal Height Columns CSS class

Locate the Column-1 DIV:

<div id="column-1">

Place your cursor between the closing quotation mark and the ending tag marker. Press your spacebar once and Dreamweaver will give you a list of valid attributes. Double-click class to set that attribute. Your cursor will be between the class attribute's opening and closing quotations and Dreamweaver will present a list of available class names.

Select p7ehc-a

Your Column-1 DIV tag should now look like this:

<div id="column-1" class="p7ehc-a">

 

Locate the Column-2 DIV:

<div id="column-2">Assign it the p7ehc-a class so that your tag looks like this:

<div id="column-2" class="p7ehc-a">

 

Locate the Column-3 DIV:

<div id="column-3">Assign it the p7ehc-a class so that your tag looks like this:

<div id="column-3" class="p7ehc-a">

That's it. Preview in a browser and all 3 of your columns will be equal height, like this Example

How the script works...

1. The PVII Equal Height Columns script works by detecting the presence of any element that is assigned a class name starting with p7ehc-x (where x is any letter or number), like p7ehc-a, p7ehc-b, etc.

2. All elements that have the same p7ehc-x class name will be treated as a group and set to equal heights. For example, all elements with the p7ehc-a class name will be treated as a group and set to the height of the tallest element in that group, while all elements with the class name p7ehc-b will be treated as a different group and set to the height of the tallest element in that group.

3. You can assign as many groups as you like.

PVII Equal Height Columns in responsive layouts

If you are deploying the script in a responsive design, we included a flag that you can use to tell the script to ignore a particular element when that element has been changed from floated to linear. In your media query rule that serves to "un-float" the element, set height to auto (with an !important directive) and max-height to 888678px:

.column-3{
float: none;
width: auto;
height: auto !important;
max-height: 888678px;

}

The .column-3 element will be ignored by the script.

Automate it...

If you would like a tool that allows you to build CSS layouts (with equal height columns) as if you were playing with LEGOS®, please see PVII CSS Column Composer Magic