CSS to create a group of text with an even left edge with auto width

I'm trying to create a layout something like this (you'll need to use your imagination):

A B
  B
  B

A is a piece of text, B is a piece of text whose left edge I would like to line up evenly with itself.

To further complicate matters, B is by default hidden, and should not be taken into account in setting up the page flow, but instead should appear when A has a mouseover on top of anything that happens to be where it appears. Thus:

A1
Asecond

on mouseover of A1 becomes:

A1 B1
AseB1
   B1

Each AB row is contained in a div that has a fixed width. I don't know in advance the size of A, so I'd like B to simply take however much space is left in the div.

On Firefox, I simply made B have an absolute position, an开发者_如何学Pythond everything was great, it worked exactly like I expected.

However, on IE8, B is taking a width equal to the containing div of fixed width, resulting in the div being overrun with overflow text due to the fact that B is already offset by the width of A. I can set the div to overflow:hidden, but this simply chops the text. Setting B to have a width:auto doesn't appear to do anything.

Am I just screwed, or is there an approach I can take that will work in all reasonably modern browsers?

---

Give this a shot: http://www.alistapart.com/articles/conflictingabsolutepositions/ Conflicting absolute positions is my favorite workaround.

May not work in IE6 under some circumstances, according to this note: http://fu2k.org/alex/css/frames/