| Summary: | [CSS3 Multi-column] Floating elements are rendered below the columns | ||
|---|---|---|---|
| Product: | WebKit | Reporter: | Knud Möller <dunken69> |
| Component: | CSS | Assignee: | Nobody <webkit-unassigned> |
| Status: | RESOLVED WORKSFORME | ||
| Severity: | Normal | CC: | fluff, jonasw, krit, syoichi |
| Priority: | P2 | ||
| Version: | 420+ | ||
| Hardware: | Mac (Intel) | ||
| OS: | OS X 10.6 | ||
| Attachments: | |||
Created attachment 56724 [details]
Image of wrong rendering in Safari
Created attachment 56725 [details]
Correct rendering in Firefox
Created attachment 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 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.
It seems to work correctly now. Please reopen the bug if you still the problem. |
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)