title: CSS div positioning assistance
body: <p>I need some help with the positioning of divs that appear on each #box's hover event.
  The hidden divs should appear over the box that was hovered in a way that:</p>
  
  <ol>
  <li>Each #tooltip div covers the box that was hovered plus the box next to it</li>
  <li>The tooltips of boxes 1 &amp; 2 should cover the boxes to the right </li>
  <li><h1>tooltips for box 3 &amp; 4 should cover the boxes to their left</h1>
  
  (to make it more understandable, please see the attached image</li>
  <li>There will be several rows of boxes so positioning should be relative and not fixed to the page dimensions (i suppose)</li>
  </ol>
  
  <p>So far I haven't managed to get the #tooltip positionings right (I know that one should be absolute and the other relative but no matter my efforts, I haven't nailed it yet).</p>
  
  <p>Here's a <a href="http://jsfiddle.net/4Svrj/1/" rel="nofollow noreferrer">jsfiddle</a> to work on and this is the result i'm after:</p>
  
  <p><img src="https://i.stack.imgur.com/Pw6fr.png" alt="enter image description here"></p>