Summary: | whole page has incorrect layout | ||||||
---|---|---|---|---|---|---|---|
Product: | WebKit | Reporter: | Anantha Keesara <anantha> | ||||
Component: | CSS | Assignee: | Nobody <webkit-unassigned> | ||||
Status: | RESOLVED INVALID | ||||||
Severity: | Normal | CC: | tabatkins | ||||
Priority: | P2 | ||||||
Version: | 528+ (Nightly build) | ||||||
Hardware: | PC | ||||||
OS: | Windows XP | ||||||
URL: | http://video.sina.com.cn/pv/ | ||||||
Attachments: |
|
Description
Anantha Keesara
2008-10-16 13:15:10 PDT
Created attachment 24406 [details]
reduction.zip
The referenced site no longer seems to have a problem, but based on the attached testcase, this is expected behavior. Here is an inline variant of the testcase (slightly altered for readability only): <!DOCTYPE html> <div id=container> <div id=float>I'm a float!</div> </div> <div id=following>I'm the last thing on the page!</div> <style> #container { width: 500px; border: thick dotted red; } #float { float: left; width: 500px; height: 200px; background: silver; } #following { width: 500px; height: 200px; background: cornflowerblue; display: table; } </style> Because #container is not a BFC, it will not contain its float. You can see by its border that it is zero-height. Thus, any following content will go directly below it, *not* below the float unless the 'clear' property is used. (Depending on exactly how you structure the testcase, it may *look* like the content goes below the float, if the following content is not a BFC and contains text.) As such, I'm marking this as INVALID, since this is expected behavior. |