JavaScript Solution to Uneven Column Heights

JavaScript Solution to Uneven Column Heights
Page content

Introduction

These days, web design is dictated by HTML and CSS coding. Gone (mostly) are the days of table-based layouts. Now we use “divs”, and apply characteristics to each div in CSS.

I usually don’t set

heights in my CSS. I find that it just causes problems later in the design, usually conflicting with browsers or later code.

But multi-columned layouts have a problem:

If your layout has three or more columns, the columns will all be different heights, depending on the length of the contained content.

And that gets ugly.

There are a couple of different ways to fix that, but in this article I’m going to discuss a CSS and JavaScript method.

The Problem

Your CSS might look like this,

body {

margin: 0;

}

#leftcol {

background: #000eee;

float: left;

width: 17%;

}

#content {

width: 65%;

float: left;

background: #000;

}

#rightcol {

float: right;

width: 17%;

background: #22ee00;

}

with this HTML:

Some Title Here

Left Column

Content goes here…

Right Column

Content goes here…

Center Column

Content goes here…

As you can see, the div titled “leftcol” is floated to the left, “rightcol” is floated to the right, and the center “content” div has been floated left to stay in between the two columns. Each div has been given a width as a percentage, which is used for fluid layouts, but for fixed layouts you can use pixels.

So whats the problem?

Right now, all three divs have exactly the same amount of content, so they will be the same height.

But it’s unlikely this will be the case on an actual site. There will be different amounts of content in each column, and your site will end up looking like this:

When it should look more like this:

goodlayout

So how to keep the columns at equal lengths?

JavaScript Solution

JavaScript code is extremely flexible and can be applied to any variation of this design.

The code will stay mostly the same, with the exception of an added class in the CSS and HTML. JavaScript interacts with websites based on div classes.

So add a class called .container to the CSS, and add the container class to each of your columns in the HTML. You can style the class or leave it empty.

Now, add this JavaScript to your HTML:

To explain how the JavaScript works:

The JavaScript function first grabs all the div elements in the HTML. Then an array stores all of the div elements that are classed with .container.

The maxHeight variable grabs the maximum height for those divs. You don’t have to specify this anywhere, it just calculates the height of each div and grabs the height of the tallest column.

The JavaScript then applies that maximum height and applies it to all the .container classed divs, resulting in all the columns being the same height, regardless of content.

Conclusion

JavaScript is a simple solution to the problems that cause columns to exist at different heights.

Beware, if users have disabled JavaScript in their browsers, the function will not run, and the columns will appear as they would without the script. If this is a concern for you, you may have to look for another solution.