IE7 Float Bug on Positioned Parent in Standards Mode?

This one’s just for the CSS gurus out there. I have a serious IE7 (Beta 3) problem and I’m stumped. In a nutshell, it seems like there is a bug in IE7 whereby in standards mode float left on a child element does not work if the parent is positioned. It seems like the parent inherits the width of the window, not the width of the window minus its left offset or padding.

Here’s what the code looks like (minus any DOCTYPE stuff):

<body style="">
<div style="border: 1px solid black; position: absolute; left: 250px;">c
<div style="border: 1px solid black; width: 300px; float: left;">Left</div>
<div style="border: 1px solid black; width: 300px; float: left;">Right</div>
<div style=""></div>

Here are the examples:

Standards Mode Example (using DOCTYPE)

Open the above link in IE7. If you size to 1024 width or above, everything is great. But watch what happens when you incrementally resize down. Instead of floating downward, the right side div scrolls off to the right until you reduce the window size to a width smaller than the width of the two divs combined.

In all other browsers this works fine. There is no special CSS involved, no box model hack, nothing like that. This occurs with any DOCTYPE I’ve tried (XHTML, DHTML, strict, loose, transitional). This makes sense, I guess, since any of these DOCTYPEs should keep IE7 in standards mode.

However, if you force IE7 into quirks mode, everything is fine:

Quirks Mode Example (DOCTYPE omitted)

The only difference in the above link is that the DOCTYPE and xmlns attributes have been omitted. As I understand it, this makes IE7 operate in “quirks mode.” But why does this very simple layout require quirks mode? And if it’s non-standard, why does it work in Firefox?

I know, the simple solution would be to run quirks mode by omitting the DOCTYPE. But I can’t. Why? Well, here’s the irony, this project is for a certain software giant, which I won’t name, but they have a product with the initials I.E.

If you can offer any suggestions, please post a comment. Thanks!

4 thoughts on “IE7 Float Bug on Positioned Parent in Standards Mode?”

  1. FYI – I think RC1 must have fixed this. Seems to work fine and checking against firefox the behavior is the same in your examples. : )

  2. This is what I get for expecting the latest and greatest to just show up in my MSDN subscription! Let me download it from the consumer site, see what happens, and then I’ll update.

    Thanks Jeff!

Leave a Reply

Your email address will not be published. Required fields are marked *