C and S Design.
Search Friendly Programming and Design

Javascript Code Articles

Something that all CSS designers are trying to produce is a way to make all columns in an design to the same height while allowing them to settle at a height dictated by the content.
This is especially useful for pages that are driven with content from a database, such as a weblog (blog) or a forum. When a entry or thread is new and there may only be one or two entries and the column with the content, which is often the centre one . The problem here is if this is a 2 or 3 column template, having the columns with different heights can end up with a page looking "unbalanced" and under some circumstances the footer (if there is one) can move out of position depending on how the document flow is is arranged.
Most of these issues can of course be worked around by using fixed height containers and with the overflow property set to auto, vertical scrolling can be used on the elements. However this is not always cross browser compliant and some browsers and systems do not allow scrolling using the mouse wheel or the cursor keys thus causing problems for some users.

So we need to bring a bit of DOM (Document Object Model) scripting into play. For the most part current browsers support the W3C DOM so provided we do not use any browser specific methods or attributes it will be cross browser compliant and for user agents that do not have scripting enabled it will simply degrade and show the standard version with uneven columns.

The page construction is quite simple for this example;

01: <!-- document head and page header go here -->
02: <div id="container">
03: <div id="column_1"></div>
04: <div id="column_2"></div>
05: <div id="column_3"></div>

06: </div>

07: <!-- bottom of document and footer go here -->

01: function getLongest_1() {
02: 	colLength = new Array(2);
03: 	colLength[0] = _ 
	document.getElementById("column_1").offsetHeight;
04: 	colLength[1] = _ 
	document.getElementById("column_2").offsetHeight;
05: 	colLength[2] = _ 
	document.getElementById("column_3").offsetHeight;
06: 	colLength.sort(sortNumeric);
07: 	colLength.reverse();
08: 	return colLength[0];
}
09: function setLongest() {
10: 	divLen = getLongest_1();
11: 	document.getElementById("column_1").style.height = _ 
	divLen+"px";
12: 	document.getElementById("column_2").style.height = _ 
	divLen+"px";
13: 	document.getElementById("column_3").style.height = _ 
	divLen+"px";
}