In my humble opinion, this is one of the most useful javascript snippets web developers will eventually have to use and reuse. Specially knowing that absolute positioned elements ‘don’t have a heigtht’, and thus they don’t expand their containers or correctly position subsequent elements bellow them. In my original article Expanding Divs (The Basics). I explain the general logic of the code that forms the function that follows. Based on that, I figured there has to be faster way to accomplish this. So I converted the code in the previous article into a set of functions.

The functions

You need all three functions because the last ‘pshow’ function calls the other two.

// return a reference to the css properties of an object based on its id
function getS(id) {
return document.getElementById(id).style;
}

// return the height of an object based on its id
function getH(id) {
return document.getElementById(id).offsetHeight;
}

// return the top value of an object based on its id
function getT(id) {
return document.getElementById(id).offsetTop;
}

// position elem with id1 relative to elem with id2 + some gap
function pshow(id, id2, gap) {
var t = getT(id2);
var h = getH(id2);
var id1 = getS(id1);
id1.top = t + h + gap + ‘px’;
}

Now, for example if you have a ‘footer’ div that you want to position 20px away from the ‘content’ div, you would just call the function as follows:

onload=function() {
pshow(’footer’,'content’,20);
}