Bug 39498 – [CSS3 Multi-column] Floating elements are rendered below the columns

• Status: RESOLVED
• Resolution: WORKSFORME
• Component: CSS

[Knud Möller]

Created attachment 56723 [details]
shows incorrect placement of floating div

In the case of several consecutive floating elements (imgs, divs, ...), only the first one seems to be rendered correctly. All following ones are rendered below the columns, leaving empty spaces behind.

(this occurred in Safari Version 4.0.5 (6531.22.7), but I can't select that from the list of versions)

[Knud Möller]

Created attachment 56724 [details]
Image of wrong rendering in Safari

[Knud Möller]

Created attachment 56725 [details]
Correct rendering in Firefox

[Knud Möller]

Created attachment 56727 [details]
shows incorrect placement of floating div (valid version...)

[Virginia Murdoch]

A small correction: floated elements that appear in the first column will be placed correctly – it's not just the first element that will be rendered correctly.

This bug persists into Webkit nightly (6533.17.8, r65222)

I have created a demonstration page here: http://pockets.inventivelabs.com.au/bug/index.html

[Jonas Walldén]

I've discovered that adding "position: relative" to the containing div (div.columns in Virginia's test case) will move the incorrectly placed floating element back to its intended location. However, the extra space at the bottom of the page remains.

[Virginia Murdoch]

It's true – adding position:relative to div.columns does as Jonas says – but simultaneously adding position:relative to the out-of-position element (div.broken) pushes it back to the wrong spot.

[Jonas Walldén]

Further experimentation shows that setting overflow: hidden on div.columns gets rid of the unwanted whitespace below, though with possibly other unwanted side-effects. (At least in this test case it causes div.columns jump up a few pixels.)

The latest nightly (r80210) shows various other issues with the same test case. I get grey text running over the red float in some circumstances (depending on window size), and also see the red box broken into two different columns even if I add -webkit-column-break-inside: avoid. These ought to be reported as separate bugs.

[Eric Nondahl]

Created attachment 98520 [details]
Reduction - CSS3 Multi-column floating inline element

I've made a reduction page for this. Resize the browser window to show two columns, and the image (inline floating element) is displayed beneath the columns, while still creating empty space for the image where it should actually be.

[Dirk Schulze]

It seems to work correctly now. Please reopen the bug if you still the problem.