Overlapping Div Monster

my css …

[CODE]#lower {height: 50%; outline: none; overflow: auto;}
.content {padding: 18px; display: none;}
#home_left {width: 50%; white-space: nowrap; float: left;}
#home_right {width: 50%; float: right;}
#home_menu, #links_menu {width: 300px; margin: 0 auto; padding: 0 18px; background: #000000;}[/CODE]

my html …

[CODE]<div id=”lower”>
<div class=”content”>
<div id=”home_left”>some text content</div>
<div id=”home_right”>
<div id=”home_menu”>some other content</div>
</div></div></div>[/CODE]

The “descriptive concept” of the javascript I’m in need of help with …

window.onresize = new Function(“if (The Left Border’s, Screen Based (not style setting based) Pixel Position of document.getElementById(‘home_menu’) is <= The Right Border, Screen Based (not style setting based) Pixel Position of The Last Letter in The Longest Line of Text Inside of document.getElementById(‘home_menu’) document.getElementById(‘home_left’).style.whiteSpace = ‘normal’; else document.getElementById(‘home_left’).style.whiteSpace = ‘nowrap’;”);

How is THAT for crazy?

What I’m basically in need of help with is finding the horizontal screen pixel position of the “home_menu” left border (with margin) … FIRST (variable a)

Then I need to get the horizontal screen pixel position … of the last right hand pixel … of the longest text line within “home_right” … SECOND (ouch, variable b).

If variable a is less than variable b, change the whitespace to normal.

There’s probably a better way and I’d love to hear about it … but be forewarned, I’m not interested in “Just bite the bullet”, “You shouldn’t care about this”, or “Stop drinking expired milk.”

I enjoy expired milk. I feel it gives me an edge when asking ladies out on a date, especially now that I’m married. It’s as if they’re so into me that they can’t take it and run away. Oh yeah, I still got it.

Anyhow …

Originally I posted a vague description of my intentions to do this and one nice user pointed me to this script:

function findPos(obj) {
var curleft = curtop = 0;
if (obj.offsetParent) {
curleft = obj.offsetLeft
curtop = obj.offsetTop
while (obj = obj.offsetParent) {
curleft += obj.offsetLeft
curtop += obj.offsetTop
}
}
return [curleft,curtop];
}

I can’t get this script to DO anything. Maybe FF doesn’t support offsetParent? I dunno, but … that’s apparently step one.

Nextly, I’m supposed to use a script located here: [url]http://www.aspandjavascript.co.uk/javascript/javascript_api/get_element_width_height.asp[/url]

I don’t need it to detect older browsers. I’m sticking with modern browsers only so I want to find a scaled down rendering of the same script.

After that it’s a matter of x-y coordinates.

I can’t even type anymore. This is going to be a pain. Anybody up for experimenting with me? If so … YOU start LOL. I have no idea where to begin.

Also in #JavaScript _↴