You need to
before you can comment on or make changes to this bug.
Created an attachment (id=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)
Created an attachment (id=56724) [details]
Image of wrong rendering in Safari
Created an attachment (id=56725) [details]
Correct rendering in Firefox
Created an attachment (id=56727) [details]
shows incorrect placement of floating div (valid version...)
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
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.
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.
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.
Created an attachment (id=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.
It seems to work correctly now. Please reopen the bug if you still the problem.