Css – Absolutely positioned parent and float:right child stretches

cross-browsercsstestcase

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+):

Expected output - IE8, FF3+, Chrome 2+, Safari 4, Opera 9+

Actual output (IE6, IE7, FF2):

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:

  1. There is an absolutely positioned div (i.e. the dialog container, jQuery-UI creates this)
  2. The div from 1) has width="auto"
  3. 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.

Best Answer

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).

Related Topic