Render a div smaller than it's contents?
 

I have a page where I'm trying to allow the user to draw a box, creating a dynamically sized div. The interface consists of clicking at the coordinates for one corner, then for the opposite corner. This allows for a box with an height and/or width of 0, which is fine with me. My problem is that the box has some text in it (instructions, really), and IE (6) refuses to let the div be smaller than the space needed to enclose the instructions. Opera (9) will render it with a width down to 0, but doesnt let the height go smaller than the instructions (two lines in this case). Firefox works great.

I'm doing the resizing with JavaScript, but it's mostly manipulating the CSS. Is there a way around this problem, or do I need to keep the text out of the div?

If code would help, I can post it, but I didn't want to hunt down everything (from the .js and the Smarty template) if I don't have to :p

Why don't you put your instructions in a just-right div anchored at the same upper-left point, but with a different z-index.

Maybe specifying an overflow will keep IE happy?

I tried setting overflow and that didn't do it. I'm going to change all the JavaScript to work with two divs like DaWei suggested in the morning, and that should work out.