Media Temple Hosting

Equal Column Height Using JavaScript

on | 1 Comment
(NOTE: I’ve updated this article with a full, working version of the code in a tutorial in a more recent post. The new article is called Equal Height Columns With JavaScript (Full Version).)

I’m currently working on a project that requires that I use either some very tricky CSS or else JavaScript to make a left column div expand automatically to fit its parent container. The parent container and left hand nav appear on multiple pages, and there is different content, including that which is dynamically generated, so I cannot just add a height to both elements in the CSS.

CSS Solutions Available

I looked over some CSS possibilities for this, but since I was already quite far along in the development, I thought it would be best to use JavaScript to accomplish this task. This problem should be quite simple to solve, but because of current CSS limitations, it’s a little tricky, and in fact, would be easier with a table-based layout.

Enter Javascript — With Caution

The first thing a developer should consider before using JavaScript to solve a problem is whether or not the page will degrade gracefully. That is, if JavaScript is not available on the client side, will the site or page be unusable? In this case, the answer was no. The page would be perfectly usable, just not as aesthetically pleasing. And in this particular design, some users may not even notice that something is missing (namely, the bottom of a light-colored gradient background image that needs to fill the column in question).

A simple calculation through the DOM

As mentioned, I need my navigation column on the left side of the page to stretch to fit its parent container. Here is the code I’m using:

var myContainerDiv = document.getElementById("leftNavContainer");
var myContainerDivHeight = myContainerDiv.offsetHeight + "px";
var myLeftNavDiv = document.getElementById("leftNavDiv");
myLeftNavDiv.style.height = myContainerDivHeight;

Here’s a rundown of the code (which obviously is stripped of its event handlers and any code that needs to trigger it like a function call): On line 1, I’m putting the container DIV into a variable via the DOM getElementById method. I then use the non-standard, but cross-browser friendly, offsetHeight property to get the height of the container. That’s done on line two, which sets another variable with the value of the height of that element, and appending “px”, to prepare it for insertion as a CSS height value. For example, if my container is 400px high, then the variable myContainerDivHeight would equal the string “400px”. It’s important to note that this value is a string and not a number that we can manipulate mathematically, due to the trailing “px”. And finally, line 3 is almost identical to line 1, only this time I’m putting the left hand div into a variable to set it up for the “400px” value that I’ve already obtained. Thus, on line 4 (I hope you’re still with me!) I set the style.height property of the left hand div to be equal to the height of the child.

Further Development on This Technique

This solution assumes that the left hand DIV (whose size we are adjusting) will start at the top of the parent container (whose size we are obtaining). There could be a situation where the left hand div appears below an image, or below another DIV. In this case, your code would have to take this into consideration, and you could easily subtract the height of that DIV or image from the total height, to ensure that your left hand DIV doesn’t extend too long.

Use it the Right Way!

I hope my readers find this code useful. I think a CSS solution to this problem would be nice, but from the research I’ve done, it does not seem that there is an easy one. In virtually every CSS solution there will be nonsemantic markup included, so I really feel that a JavaScript solution is cleaner, and much easier, provided it’s done unobtrusively.

One Response

  1. avnish:

    thanks for this code and now i want to many more this type to ex for post all time and send me

Leave a Reply

Comment Rules: Please use a real name or alias. Keywords are not allowed in the "name" field. If you use keywords, your comment will be deleted, or your name will be replaced with the alias from your email address. No foul language, please. Thank you for cooperating.

Instructions for code snippets: Wrap inline code in <code> tags; wrap blocks of code in <pre> and <code> tags. When you want your HTML to display on the page in a code snippet inside of <code> tags, make sure you use &lt; and &gt; instead of < and >, otherwise your code will be eaten by pink unicorns.