448667 - Inconsistent auto float width between major browsers

Status: RESOLVED INVALID

(Core :: Layout: Floats, defect)

Description

[Stanimir Stamenkov]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1.13) Gecko/20080313 SeaMonkey/1.1.9 (Spidey; Mnenhy 0.7.5.0)
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.9.1a2pre) Gecko/2008073103 Minefield/3.1a2pre

Firefox 3.1 Alpha and the other major browsers: Opera 9.51 and Safari 3.1.2 on Windows, have different behavior of automatically calculating the width of floats when the viewport is narrower than their "natural" width.  That is, if a floated block has two inline boxes which are spread over two lines because the viewport is not wide enough to hold them on one line, the width of the float with Firefox and Safari fills the viewport width, while Opera (and Firefox 2) shrinks-to-fit its width.

I guess there's no right or wrong behavior in this case but currently I find the old behavior more useful for me as I'm relying on the shrink-to-fit dimension to place decorations relatively to it (as could be seen in the header menu on http://www.kroumvs.com/).  A CSS property controlling this behavior would be useful, if it doesn't require major layout rework.

Reproducible: Always

Comment 1

[Stanimir Stamenkov]

Attachment: Test case

Make the browser window narrow enough so the menu items box go on a new line (below the logo) - observe the floated header block width.

Comment 2

[Stanimir Stamenkov]

Attachment: Simplified test case

Comment 3

[Mats Palmgren (inactive)]

The current layout in Firefox 3, Safari and IE8 is correct according to
CSS2.1, 10.3.5:
http://www.w3.org/TR/CSS21/visudet.html#float-width

(filed as bug 268499 and fixed by reflow branch landing)

Comment 4

[Daniel.S]

(In reply to comment #3)
> The current layout in Firefox 3, Safari and IE8 is correct according to
> CSS2.1, 10.3.5:
> http://www.w3.org/TR/CSS21/visudet.html#float-width

Correct. When the line's broken, the shrink-to-fit width is the same as the available width.