Absolutely positioned parent and float:right child stretches
cross-browser, css, testcase
Solution
Apologies for the negative answer, but I don't think there's a way around this. The CSS implementation for those older browsers is simply incorrect when it comes to the case you've outlined, and I don't believe there's any way to hack around this via other CSS properties within the constraints you've given us. As a limited fix you could in theory set a `max-width` on the outer div to limit the degree to which it stretches... but unfortunately `max-width` isn't supported in all of the 'old' browsers mentioned anyway.
I know it's not what you're wanting to hear, but I think you're going to have to bite the bullet and either change the markup or relax your style requirements (e.g. give up on the float).
Problem
In IE6, IE7 and FF2 the `.outer` div below is stretching out to the right edge of the document. Here is a complete test case: ``` <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <style> .outer { position:absolute; border:1px solid red; } .outer .floater { float:right; } </style> </head> <body> <div class="outer"> <div class="floater">Lorem ipsum</div> </div> </body> ``` As I understand `position:absolute`, the outer div should be removed from the flow of the document and (without a width specified) should take up the minimal amount of space needed to display its contents. However `float:right` on any child breaks this. Expected output (IE8, FF3+, Chrome 2+, Safari 4, Opera 9+): Actual output (IE6, IE7, FF2): How do I get the outer div to not stretch? This is only happening in IE6, IE7 and Firefox 2. Requirements: - `.outer` cannot have a `width` set (it must be left as `"auto"`) - `.outer` must remain absolutely positioned - `.floater` must remain floated to the right Update: I've reproduced the behavior as a "real world" example using jQuery dialog. The characteristics are the same: - There is an absolutely positioned div (i.e. the dialog container, jQuery-UI creates this) - The div from 1) has `width="auto"` - There is an element inside this dialog that is floated to the right. See it here. Again, IE6, IE7 and FF2 are the only problematic browsers. This replicates the conditions inside my application. I tried boiling down the problem to what you see above this Update, but I'm getting the sense that people could use a real-world example where my requirements make sense. I hope I've done this.