title: How to reposition CSS-hover popups to stay within a fixed frame?
body: <p>I have a page filled with many fixed-size boxes in a grid layout (div's simply piled up with float:left). On hovering the mouse on any of them, a 'popup' - larger div with the same and also additional info is shown over it, as if the box expanded in all directions (but not moving the other boxes, it's shown also over them). Simplified html/css below. It's like thumbnails/full images, but the actual content is a pile of various html data, including links, etc.</p>
  
  <p>The problem is that in this way the 'popup' div for the leftmost/rightmost boxes goes over the screen, triggering the scrollbar; or they are cut off if I don't allow the overflow.</p>
  
  <p>I would like instead to reposition these popups to left/right so that they stay within the total borders. How to approach this need?</p>
  
  <p>I can't do this server-side as the server does not know which boxes will be rightmost/leftmost - it depends on window size, how many columns will fit there. My first idea is to use javascript to change the positioning for all the popups right after the page is loaded, but I don't know how to a) find out which popups would be sticking out of the frame; and even b) find out the size of the popups, since they are hidden normally, which means width=height=0 until they are shown.  </p>
  
  <p>Perhaps a completely different approach of showing these popups would be easier than repositioning the div's that I currently have?</p>
  
  <p>Currently Prototype/scriptaculous is used at some other pages, the server side is ruby on rails.</p>
  
  <pre><code>&lt;div class="frame"&gt;
    &lt;div class="box", id="object123" &gt;
      small, fixed size content here
      &lt;div class="popup"&gt;
        large, variable size/width/height content here that describes object123
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div class="box", id="object456" &gt;
      small, fixed size content here
      &lt;div class="popup"&gt;
        large, variable size/width/height content here that describes object456
      &lt;/div&gt;
    &lt;/div&gt;
    ... many other similar boxes.
  &lt;/div&gt;
  
  div.frame {
    overflow: hidden;
  }
  div.box {
    border:1px solid #efe9dc;  
    margin:5px;
    position:relative;
    float:left;
    height:70px;
    width:150px; 
  }
  div.popup {
    min-width:200px;
    display:none;
    position:absolute;
    left:-30px;
    top:-30px;    
    z-index:1000;
  }
  div.box:hover .popup { display: block; }
  </code></pre>