I have a page layout that has a main content area whos size is determined dynamically. Under this area I have either one or two other areas which are defined and created (widget areas). I have a <div> in one of the widget areas. What I want is to determine the position of the <div>

I'm talking about a layout that looks something like this:
|--|   |-------------------------|
|S|   |  C                           |
|  |   |                               |
|  |   |                               |
|  |   |-------------------------|
|  |
|  |   |-----------|  |----------|
|  |   | W1       |   |W2       |
|--|   |-----------|  |----------|
S - sidebar
C - main content area
W1, W2 - widget areas

If I place a <div> inside W1, how can I find out its position. I can't know before hand as I don't know what the size of the main content will be.

I am familiar with some of the DOM

I know how to use document.getElementById(ID).style.left and so on, the problem is that it returns null.

Here is the DIV that is in W1
<div class="widgetpanel1" style = "height:300px; width:250px;"></div>
I can't set the position before hand because I don't know what it will be. After the page has loaded the DIV is in the correct position but I don't know how to get its position.

I hope that makes sense.