Multi-column layouts can create issues where the columns heights are dependent on their content, which prevents them from lining up correctly at the bottom. This JavaScript function is one of the easiest solutions to this problem.
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
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:
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:
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.
