问题与相对元素内的绝对元素的宽度有关

This is what im doing:

I have a list of CD tracks (im using a table for tabular data)
The lyrics for each track is hidden below the name of the track, inside a div
when i click the track, the lyrics pops up, right to the name of the track

The issue i'm having is with the width 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.

In my case, the width of the lyrics popup is the max width of the relative cell data.

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!!

Any ideas how to do this? Thanks

the text line brak is defined by the width... i dont want that

my html:

<table class="tbl-track">
  <tbody>
    <tr>
      <td>1</td> //width: 20px

      <td class="track-name"> //width: 350px
        <a class="track" href="">track 1</a>
        <div class="lyrics" style="display:none;">
          lyrics goes here<br />
          line 1<br/>
          line 2<br />
          ...<br />
        </div>
      </td>

      <td>duration</td> //width: auto

      <td>play button</td> //width: 20px
    </tr>
  </tbody>
</table>

this is my css:

.tbl-track td.track-name {position:relative;}
.lyrics {position:absolute; left:0; top:-20px; background:#000; padding:20px; z-index:999}

this is my jquery:

$('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();
});

Edited / Corrected:

Specify "width: auto;" in .lyrics doesn't fix it. Also trying "float" doesn't fix it.

Checking this article: http://www.alistapart.com/articles/conflictingabsolutepositions/ you can't do it at all. So not good.

My suggestions would be to use JS to move the div to the "body" and then you have free width. When you're done, move the div back to where you house it (if required). Or just create them under the BODY / leave them all under the Body if you can as this would be easier and faster for the user.

And, in case you want to try anthing else, here's my compressed test HTML:

<html>
 <head>
  <style>
    #rel {
       position: relative;
       top: 100px;
       left: 100px;
       width: 300px;
       height: 300px;
       background: red;
    }
    #abs {
       position: absolute;
       left: 100;
       background: green;
       width: auto;
    }
  </style>
 </head>
 <body>
   <div id="rel">
     <div id="abs">asd fasdf sadf sadf sdaf sdaf sdaf sdaf sdaf sdaf sdaf sdaf sdaf sdaf sdaf sdaf sda f sda f sdaf sd af sda fsda fsdafsda fsd af sdaf sda fsad f sdaf sdaf sda f sda f sda fs adf sd af sda f sda f sda fsd af s adf sda f s fas sdf</div>
   </div>
 </body>
</html>

What about something like this? http://jsfiddle.net/NVV9Y/

The primary fix I added was a min-width to the .lyrics box. It stays at least 175px width, but will expand to the width of the div as well if it's width than 175px.

I think if you want each one to be sized according to the actual width of your lyrics, just add class="small", class="med", or class="wide" to the .lyrics box and the corresponding CSS. As such: http://jsfiddle.net/NVV9Y/1/