title: Change <a> position to "absolute" on hover (to display full wording)
body: <p>Have a set of links in rows.</p>
  
  <p>CSS:</p>
  
  <pre><code>.table div {
      float:left;
      margin-right:5px;
      width:150px; /*width needs to be fixed, since we're limited in space*/
      white-space:nowrap;
      overflow:hidden
  } 
  a.trick,a.trick:link,a.trick:active,a.trick:visited {position:static}
  a.trick:hover{position:absolute}
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class=table&gt;
    &lt;div&gt;Text here&lt;/div&gt;
    &lt;div&gt;&lt;a class=trick href="#"&gt;Text here may be too long to fit&lt;/a&gt;&lt;/div&gt;
    &lt;div&gt;Next column&lt;/div&gt;
    &lt;div&gt;of my table made of divs&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Works great in Opera and Firefox (on hover overlaps the next "column", displaying full content).</p>
  
  <p>In Chrome (Safari too, likely) does not react to :hover at all.</p>
  
  <p>Anyone knows a way to bypass, preferably without JS/jQ (pure CSS)?
  Thanks in advance!</p>