Dynamically Set The Height Of One Div Based On That Of Another

I'm trying to create the following visual feature on my page (www.enviromark.ca/Collab/study.html). if you notice, there is a border-right: 1px solid grey; on the 'links' div. I would like to do the following:

onload, i would like the height of the 'links' div to be saved into a variable
i assume this would be done using a variation of 'var minHeight = document.getElementByID('links').offsetHeight'
onclick, i would like the height of the div about to be loaded (aka unhidden) to be saved into a variable... say var newHeight for ex.
IF newheight > minHeight, set document.getElementByID('links').height = 'newHeight' + px;

here's how i tried to code it:

<script language="JavaScript">
function setBorderHeight(divName)
{
var minHeight = document.getElementByID('links').offsetHeight;
var newHeight = document.getElementByID(divName).offsetHeight;

if (newHeight > minHeight)
{
document.getElementByID('links').style.height = 'newHeight' + px;
}
}
</script>

here's an example of a link:
<a class="mainLinks" href="learnMore" onclick="setBorderHeight('learnMore'); ball(this.previousSibling); return toggle('learnMore', 0);"
onmouseover="zxcMseOver(this,1);" onmouseout="zxcMseOver(this,-1);">Learn More</a>

what went wrong?