Menu
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 rightUpdate:
I've reproduced the behavior as a "real world" example using jQuery dialog. The characteristics are the same:
width="auto"
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.
204
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).
162
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
