WEB STANDARDS

Matching div heights with CSS and JavaScript

It's not unusual for the layout of a Web page to feature multiple columns. Unfortunately, when creating this layout while using general <div> containers, you can end up with columns of uneven height, depending on their content. This looks very unprofessional. Alejandro Gervasio explains a way to keep your column heights even using CSS and JavaScript.

Author Info:

By: Alejandro Gervasio

Poor Best

Rating:

/ 42

March 14, 2005

TABLE OF CONTENTS:

<html>
<head>
<title>THREE-COLUMN LAYOUT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
     margin: 0px;
}
#leftcol {
     background: #ccf;
     float: left;
     width: 17%;
}
#content {
     width: 65%;
     float: left;
     background: #ccf;
}
#rightcol {
     float: right;
     width: 17%;
     background: #ccf;
}
</style>
</head>
<body>
<div id="leftcol">
Left Section<br /><br />
Content goes here...<br />
Content goes here...<br />
Content goes here...<br />
Content goes here...<br />
Content goes here...<br />
Content goes here...
</div>
<div id="rightcol">
Right Section<br /><br />
Content goes here...
</div>
<div id="content">
Content Section<br /><br />
Content goes here...<br />
Content goes here...
</div>
</body>
</html>

Once again, unfortunately, <div> elements will be unequally displayed in the document, resulting in the following undesirable visual output:

The last remaining case to be analyzed, which certainly would render non-matching <div> heights for the Web document's columns, will occur when additional content is included in the right column. This situation might be represented with the following code, based on the previous examples:

<html>
<head>
<title>THREE-COLUMN LAYOUT</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
body {
     margin: 0px;
}
#leftcol {
     background: #ccf;
     float: left;
     width: 17%;
}
#content {
     width: 65%;
     float: left;
     background: #ccf;
}
#rightcol {
     float: right;
     width: 17%;
     background: #ccf;
}
</style>
</head>
<body>
<div id="leftcol">
Left Section<br /><br />
Content goes here...<br />
Content goes here...
</div>
<div id="rightcol">
Right Section<br /><br />
Content goes here...<br />
Content goes here...<br />
Content goes here...<br />
Content goes here...<br />
Content goes here...<br />
Content goes here...
</div>
<div id="content">
Content Section<br /><br />
Content goes here...
</div>
</body>
</html>

As we've done with the above samples, the visual output for this code is illustrated below:

Consciously, we've taken a detailed look at the most common cases where the columns and content sections are displayed with different heights, according to the content that each element should contain. Indeed, the problem must be quickly tackled, preventing its ugly side effects, when we're utilizing <div> elements for page layout. So, how can we make column heights match properly, showing a very polished and consistent look, independently from the content generated? Fortunately, the answer is quite simple: a JavaScript function that will set <div> heights to the same value, achieving the desired matching height. Now, let's take a look at the JavaScript code.

Next: The JavaScript solution >>