Bug 90251 – Shrinkwrapped box containing a [display:block] + [float:left] + [float:left;clear:left] expands parent box to the right

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[biziclop]

Created attachment 150095 [details]
single html showing the bug

( source of the bug: http://stackoverflow.com/questions/11249286/chrome-bug-css-positioning-incorrectly-resizing-container/ )

Example with workaround attempts: http://jsfiddle.net/SyKfm/16/

Reduced structure:

    div: position:absolute or display:inline-block
      div: block element with or without explicit width
      div: float:left
      div: float:left + clear:left

    div: position:absolute or display:inline-block
      div: float:left
      div: float:left + clear:left
      div: block element with or without explicit width

Expected: the parent div should shrinkwrap "nicely" around the two floats and the block element

Symptom: the parent div's width becomes the sum of the two floated element's width, even if the second float is below the first.


Workarounds:
1. replacing clear:left to clear:both on the second float
2. setting float:left on the parent element

[Brent Fulgham]

Safari, Chrome, and Firefox all agree on rendering for this test case. I don't believe there is any remaining compatibility issue.