Retrieve margin-top value from other ids

[hablablow]

hi there,
I'm trying to set a margin-top value for a layer C wich would be the sum of two fixed layers height above: A and B. I can have no precise control in css, even with relative units, of C position , since A and B vary in height according to their content and the screen size of user.
The bug occurs when content of layer just above, B, wraps on several lines. It covers over the content of C.
I have build up a page to show you what i'm talking about <

http://www.hablablow.com/fixedTest/css_d_page.htm>

A Js solution would consist in resolving this

nonFixedLayer{
margin-top: fixedLayer1ScreenHeight+fixedLayer2ScreenHeight;
}

To make things not easyer, and scalable, the second fixed layer doesn't have a height defined, since his content is variable.
I'm sorry not to mention any Js here but i don't find any ressource on this subject.
I suppose we should use some document write, and a listener wich would fire a value ( margin-top ) so that when the user resizes his window, the margin-top value changes.
Take a look at the example link i've set up.
Thanks in advance for any answer.

Thanks.

 

[hablablow]

Ok,
here comes a start:
var firstDiv = document.getElementById("FirstOne");
var secondDiv = document.getElementById("SecondOne");
var artDiv = document.getElementById("Article");

artDiv.style.marginTop = (firstDiv.offsetHeight + secondDiv.offsetHeight) + "px";

That is ideally a solution i could lightup while onload.

But i keep trying to think it is possible to setup a "listener" ( surely not the apropriate term ) that would adjust the margin-top value when (firstDiv.offsetHeight + secondDiv.offsetHeight) changes ( if user resizes his browser window for example ). Can this be done somehow or is it impossible to view it this way ?
I definitely need help on this one...
Thanks.