Positioning DIVs with Javascript

Question

I have two divs that I need to position horizontally dependent on the width of the user's screen. I've styled their vertical position in CSS, and I am trying to position them horizontally using Javascript.

My divs:

<div id="tl">
     blah blah
</div>
 <div id="bl">
     blah blah
</div>

My CSS:

#tl {
position: absolute;
top: -14px;
right: 0;
}
#bl {
position: absolute;
bottom: 1px;
right: 0;
}

My Javascript:

var tl = document.getElementById('tl');
var bl = document.getElementById('bl');
var wide = parseInt(screen.width);
var nudge = wide*.86;
nudge = nudge+21;
tl = tl.style;
tl.right = ( parseInt(tl.right) + nudge );
bl = bl.style;
bl.right = ( parseInt(bl.right) + nudge );

However... nothing happens. No errors, and definitely no movement from my divs. What am I doing wrong? Can anyone help?

Answer 1

jquery makes this very easy http://jquery.com/

$("#t1").css( {"right" : $("#t1").position().right+$(window).width()*0.86+21} );

Answer 2

Make your 'right' style inline:

<div id="tl" style="right:0">
    blah blah
</div>
<div id="bl" style="right:0">
    blah blah
</div>