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
Product: WebKit
Classification: Unclassified
Component: CSS
: 420+
: Macintosh Intel Mac OS X 10.6
: P2 Normal
Assigned To: Nobody
:
Depends on:
Blocks:
  Show dependency treegraph
 
Reported: 2010-05-21 10:27 PDT by Knud Möller
Modified: 2014-01-02 09:12 PST (History)
4 users (show)

See Also:


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

Note You need to log in before you can comment on or make changes to this bug.
Description Knud Möller 2010-05-21 10:27:19 PDT
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)
Comment 1 Knud Möller 2010-05-21 10:31:00 PDT
Created attachment 56724 [details]
Image of wrong rendering in Safari
Comment 2 Knud Möller 2010-05-21 10:31:38 PDT
Created attachment 56725 [details]
Correct rendering in Firefox
Comment 3 Knud Möller 2010-05-21 10:41:39 PDT
Created attachment 56727 [details]
shows incorrect placement of floating div (valid version...)
Comment 4 Virginia Murdoch 2010-08-13 22:06:34 PDT
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 Jonas Walldén 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 Virginia Murdoch 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 Jonas Walldén 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 Eric Nondahl 2011-06-24 11:43:56 PDT
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.
Comment 9 Dirk Schulze 2014-01-02 09:12:25 PST
It seems to work correctly now. Please reopen the bug if you still the problem.