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, and 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?