title: issue with the width of an absolute element inside a relative element
body: <p>This is what im doing:</p>
  
  <ul>
  <li>I have a list of CD tracks (im using a table for tabular data)</li>
  <li>The lyrics for each track is hidden below the name of the track, inside a div</li>
  <li>when i click the track, the lyrics pops up, right to the name of the track</li>
  </ul>
  
  <p>The issue i'm having is with the <strong>width</strong> of an absoulte element inside a relative element. For some reason, the width of the absolute element is the max width of the relative element.</p>
  
  <p>In my case, the width of the lyrics popup is the max width of the relative cell data.</p>
  
  <p>What i want is for the absolute element width to flow naturally without any defined width constraint. This way the lyrics line breaka are ok... I could define a width for the lyrics popup, but then some lyrics will have an ugly empty right space... I want my project to be perfect!!</p>
  
  <p>Any ideas how to do this? Thanks</p>
  
  <p><img src="https://i.stack.imgur.com/ZoO30.jpg" alt="the text line brak is defined by the width... i dont want that"></p>
  
  <p>my html:</p>
  
  <pre><code>&lt;table class="tbl-track"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;1&lt;/td&gt; //width: 20px
  
        &lt;td class="track-name"&gt; //width: 350px
          &lt;a class="track" href=""&gt;track 1&lt;/a&gt;
          &lt;div class="lyrics" style="display:none;"&gt;
            lyrics goes here&lt;br /&gt;
            line 1&lt;br/&gt;
            line 2&lt;br /&gt;
            ...&lt;br /&gt;
          &lt;/div&gt;
        &lt;/td&gt;
  
        &lt;td&gt;duration&lt;/td&gt; //width: auto
  
        &lt;td&gt;play button&lt;/td&gt; //width: 20px
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;
  </code></pre>
  
  <p>this is my css:</p>
  
  <pre><code>.tbl-track td.track-name {position:relative;}
  .lyrics {position:absolute; left:0; top:-20px; background:#000; padding:20px; z-index:999}
  </code></pre>
  
  <p>this is my jquery:</p>
  
  <pre><code>$('a.track').click(function(e) {    
    var w = $(this).width();
    var this_lyrics = $(this).next('.lyrics');
    var duration = 200;
  
    // hide opened lyrics before displaying a new one
    $('.lyrics').fadeOut(100);
  
    this_lyrics.hide().css({left:w + 20}).fadeIn(duration);
  
    e.preventDefault();
  });
  </code></pre>