I tried to add some content inside the content-main-two-column div and in my content there are some hyperlink that I want show extra info whenever user hover mouse on it.

But the div contains extra info always shown at the bottom of the whole page, (beneath the footer menu). 

I test my code  in an empty aspx page, it works fine, so I think it must be something with the style of content-main-two-column div, but what it is, I do not know.

Is it something about the z-index? somebody please guide.... 

Any help is appericiated.

Below is the html that I added into the default page,  (right before  <div id="content-side-two-column")

     <P>
    test <a onmouseover="ShowContent('myDiv'); return true;" onmouseout="HideContent('myDiv'); return true;" href="javascript:ShowContent('myDiv')">test</a>test
    <a onmouseover="ReverseContentDisplay('uniquename'); return true;"
   href="javascript:ReverseDisplay('uniquename')">
[show/hide]
</a>
rest info
</P>
<div id="myDiv" style="display:none; position:absolute; border-style:inset solid; background-color: #dfe9ff; padding: 5px; width: 240px;">
    Content to be shown
</div>

<div
   id="uniquename"
   style="display:none;
      position:absolute;
      left:10px;
      top:10px;
      border-style: solid;
      background-color: white;
      padding: 5px;">
Absolute position content
</div>

 and javascript

         <script type="text/javascript" language="javascript">
    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"; }
}


function ReverseDisplay(d) {
//not sssignPosition
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}

    
    </script>