Bug 39498 - [CSS3 Multi-column] Floating elements are rendered below the columns
: [CSS3 Multi-column] Floating elements are rendered below the columns
Status: RESOLVED WORKSFORME
: WebKit
CSS
: 420+
: Macintosh Intel Mac OS X 10.6
: P2 Normal
Assigned To:
:
:
:
:
  Show dependency treegraph
 
Reported: 2010-05-21 10:27 PST by
Modified: 2014-01-02 09:12 PST (History)


Attachments
shows incorrect placement of floating div (1.93 KB, application/xhtml+xml)
2010-05-21 10:27 PST, Knud Möller
no flags Details
Image of wrong rendering in Safari (94.39 KB, image/png)
2010-05-21 10:31 PST, Knud Möller
no flags Details
Correct rendering in Firefox (124.13 KB, image/png)
2010-05-21 10:31 PST, Knud Möller
no flags Details
shows incorrect placement of floating div (valid version...) (1.93 KB, application/xhtml+xml)
2010-05-21 10:41 PST, Knud Möller
no flags Details
Reduction - CSS3 Multi-column floating inline element (34.53 KB, application/zip)
2011-06-24 11:43 PST, Eric Nondahl
no flags Details


Note

You need to log in before you can comment on or make changes to this bug.


Description From 2010-05-21 10:27:19 PST
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)
------- Comment #1 From 2010-05-21 10:31:00 PST -------
Created an attachment (id=56724) [details]
Image of wrong rendering in Safari
------- Comment #2 From 2010-05-21 10:31:38 PST -------
Created an attachment (id=56725) [details]
Correct rendering in Firefox
------- Comment #3 From 2010-05-21 10:41:39 PST -------
Created an attachment (id=56727) [details]
shows incorrect placement of floating div (valid version...)
------- Comment #4 From 2010-08-13 22:06:34 PST -------
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
------- Comment #5 From 2011-03-04 04:38:49 PST -------
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.
------- Comment #6 From 2011-03-06 14:16:34 PST -------
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.
------- Comment #7 From 2011-03-07 00:12:46 PST -------
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.
------- Comment #8 From 2011-06-24 11:43:56 PST -------
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.
------- Comment #9 From 2014-01-02 09:12:25 PST -------
It seems to work correctly now. Please reopen the bug if you still the problem.