I saw a question elsewhere that got me thinking about doing this in JS: have a div on screen that always has twice as much margin on the right as on the left (so the div is always "off center", so to speak). To my amazement, I managed to put together some code that seems to do the job, though I'll bet there are much better ways to do this. So, as a learning exercise, I was wondering if anyone can demonstrate how this code could be improved or made more robust. (I tested it on all the latest Mac browsers, but didn't bother with IE, so I don't know if it works there or not.)

Here's a live example: http://cdpn.io/LIizc

Code javascript:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
 
<style media="all">
body {margin: 0; padding: 0;}
div {width: 600px; height: 600px; background: red; }
 
</style>
 
</head>
<body>
 
<div id="test"></div>
 
<script>
function resize() 
{
    var div = document.getElementById("test");
    var windowWidth  = document.documentElement.clientWidth;
    var remainder = windowWidth - div.clientWidth;
    div.style.marginRight = remainder * 2/3 + "px";
    div.style.marginLeft = remainder * 1/3 + "px";
}
window.onresize = resize;
resize();
</script>
</body>
</html>