CSS Columns and FireFox

I’m trying to use JavaScript to create CSS columns that have equal height. I dynamically generate any number of DIV tags and would like for them to have the same height.

I have the following JavaScript:

[CODE] <script type=”text/javascript”>
matchHeight = function() {
var divs, contDivs, maxHeight, divHeight, d;
// get all <div> elements in the document
divs = document.getElementsByTagName(‘div’);
contDivs = [];
// initialize maximum height value
maxHeight = 0;

// iterate over all <div> elements in the document
for (var i = 0; i < divs.length; i++) {
// make collection with <div> elements with class attribute ‘smallcol’
if (/bsmallcolb/.test(divs[i].className)) {
d = divs[i];
contDivs[contDivs.length] = d;
// determine height for <div> element
if (d.offsetHeight) {
divHeight = d.offsetHeight;
}
else if (d.style.pixelHeight) {
divHeight = d.style.pixelHeight;
}
// calculate maximum height
maxHeight = Math.max(maxHeight, divHeight);
}
}

// assign maximum height value to all of container <div> elements
for (var i = 0; i < contDivs.length; i++) {
contDivs[i].style.height = maxHeight;
}
}

// execute function when page loads
window.onload = function() {
if (document.getElementsByTagName) {
matchHeight();
}
}

</script>[/CODE]

Here is my CSS:

[CODE].smallcol
{
float: left;
width: 32%;
background-color: #EEE7DD;
border: solid 0px #D0B996;
}[/CODE]

Everything works fine in IE, but does not work in FireFox.

Any ideas?

Also in #JavaScript _↴