Rollover image that has a div pop up and not have the div extend beyound the boundries of the viewable webpage

If you look at this link:

http://www.mc.com/products/

You will see a page full of images and you can rollover the images to see a list of sub catagories that are being pulled using xslt and sql server database.

The problem I'm having is trying to get the rollover pop up div to always be visable in the frame of the webpage so basically I want the div window to reposition it self to a higher or more to the left if the div needs more room so it can be fulled viewed.

A good example of what I'm talking about would be, goto the link and hover over a product picture at the bottom of the screen. You will notice that the div box just drops down from the image and you can't see some of the links unless you screen farther down the page. I'm trying to make it so the div will auto reposition itself higher so it is full visable.

Hope you can understand what I'm looking for.

Been bashing my head over this for a few days now and just can't find any code or modify what I'm working with to accomplish this. I did find a few .js files that would make a tooltip box that would auto position but I couln't adapt the code to my own because they just did not mesh well.

Any thoughts of how to do this or an example of how to auto position a div to always be viewable on the screen as long as the cursor is rolled over the picture.

Here is the xslt that pulls the information and displays it in the div:

http://www.mc.com/xslt/productlist.xsl

Here is the code in the xslt file that controls the div:

<div class="ProductFlyout">
- <!--  Needed for product splash pages.  Sometimes the node will be the root node, others it will be the second to last node 
  --> 
- <xsl:choose>
- <xsl:when test="/TaxonomyData/TaxonomyName = 'Products'">
- <div class="ProductFlyoutHeader" style="background-image:url('/images/global/products/pop-up-box/pop-up-box-top-{ancestor::TaxonomyData[last()-1]/TaxonomyDescription}.gif');" onclick="CloseProductFlyout(this);">
  <xsl:value-of select="ancestor::TaxonomyData[1]/TaxonomyName" /> 
  </div>
  </xsl:when>
- <xsl:otherwise>
- <div class="ProductFlyoutHeader" style="background-image:url('/images/global/products/pop-up-box/pop-up-box-top-{ancestor::TaxonomyData[last()]/TaxonomyDescription}.gif');" onclick="CloseProductFlyout(this);">
  <xsl:value-of select="ancestor::TaxonomyData[1]/TaxonomyName" /> 
  </div>
  </xsl:otherwise>
  </xsl:choose>
- <div class="ProductFlyoutDescription">
  <xsl:value-of select="TaxonomyName" /> 
  </div>
- <div class="ProductFlyoutItems">
- <ul>
  <xsl:apply-templates select="TaxonomyItems" /> 
  </ul>
  </div>
  <div class="ProductFlyoutBottom">&nbsp;</div> 
  </div>

Select allOpen in new window