Bug 21653

Summary: whole page has incorrect layout
Product: WebKit Reporter: Anantha Keesara <anantha>
Component: CSSAssignee: 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 Flags
reduction.zip none

Anantha Keesara
Reported 2008-10-16 13:15:10 PDT
I Steps: Go to http://video.sina.com.cn/pv/ II Issue: whole page has incorrect layout III Conclusion: The issue is caused by the child <div> 's style: float: left. Notice that the style='float:left' is specified in the child <div> not the parent <div>, so the content after the parent <div>(in this case it is a table) should be rendered in a new line, however webkit/FF3 parses the code wrongly and just let the content follow the parent <div>, not start in a new line webkit/FF3 take the child's style style='float:left' as the parent's style III Other Browsers: IE7: ok FF3: not ok IV Nightly tested: 37382
Attachments
reduction.zip (469 bytes, application/octet-stream)
2008-10-16 13:15 PDT, Anantha Keesara 		no flags
Details
View All Add attachment proposed patch, testcase, etc.
Anantha Keesara
Comment 1 2008-10-16 13:15:12 PDT
Created attachment 24406 [details] reduction.zip
Tab Atkins
Comment 2 2011-10-24 08:30:16 PDT
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.
Note You need to log in before you can comment on or make changes to this bug.