Floating DIV is showing outside the screen width - need HELP!

Floating DIV is showing outside the screen width - need HELP!

Hi, i have created a simple div and a hover show/hide link. The code works fine when the link text is left alinged. But when the link text is right aligned, the DIV is going outside the screen width. I don't want to modify the DIV's height and width but move the div inside the screen when it goes beyond the right screen width. I have searched for a simple code from jquery to do that, i found that the .position function with the fit flip parameter can move the div inside the screen width, but no chance to figure it out.

Any ideas? Thanks...

Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>TEst Div</title>
</head>
<script type="text/javascript" src="source/jquery-2.1.1.js"></script>
<script type="text/javascript" src="source/jquery-ui.js"></script>


<body>
   
    <script type="text/javascript" language="JavaScript">
    <!-- Copyright 2006,2007 Bontrager Connection, LLC
    // http://bontragerconnection.com/ and http://willmaster.com/
    // Version: July 28, 2007
    var cX = 0; var cY = 0; var rX = 0; var rY = 0;
    function UpdateCursorPosition(e){ cX = e.pageX; cY = e.pageY;}
    function UpdateCursorPositionDocAll(e){ cX = event.clientX; cY = event.clientY;}
    if(document.all) { document.onmousemove = UpdateCursorPositionDocAll; }
    else { document.onmousemove = UpdateCursorPosition; }
    function AssignPosition(d) {
    if(self.pageYOffset) {
    rX = self.pageXOffset;
    rY = self.pageYOffset;
    }
    else if(document.documentElement && document.documentElement.scrollTop) {
    rX = document.documentElement.scrollLeft;
    rY = document.documentElement.scrollTop;
    }
    else if(document.body) {
    rX = document.body.scrollLeft;
    rY = document.body.scrollTop;
    }
    if(document.all) {
    cX += rX;
    cY += rY;
    }
    d.style.left = (cX+10) + "px";
    d.style.top = (cY+10) + "px";
    }
    function HideContent(d) {
    if(d.length < 1) { return; }
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    if(d.length < 1) { return; }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    dd.style.display = "block";
    }
    function ReverseContentDisplay(d) {
    if(d.length < 1) { return; }
    var dd = document.getElementById(d);
    AssignPosition(dd);
    if(dd.style.display == "none") { dd.style.display = "block"; }
    else { dd.style.display = "none"; }
    }
    //-->
    </script>
    
     
    <p align="right">
    
    <a onmouseover="ShowContent('uniquename3'); return true;" onmouseout="HideContent('uniquename3'); return true;" href="javascript:ShowContent('uniquename3')">
    [show on mouseover, hide on mouseout]
    </a>
    </p>
    <div id="uniquename3" style="display:none; position:absolute; border-style: solid; background-color: white; padding: 5px; left:175px; top:76px">
    Content goes here.
    </div>
  
</body>
</html>