Bug 21653 - whole page has incorrect layout
Summary: whole page has incorrect layout
Status: RESOLVED INVALID
Alias: None
Product: WebKit
Classification: Unclassified
Component: CSS (show other bugs)
Version: 528+ (Nightly build)
Hardware: PC Windows XP
: P2 Normal
Assignee: Nobody
URL: http://video.sina.com.cn/pv/
Keywords:
Depends on:
Blocks:
 
Reported: 2008-10-16 13:15 PDT by Anantha Keesara
Modified: 2011-10-24 08:30 PDT (History)
1 user (show)

See Also:


Attachments
reduction.zip (469 bytes, application/octet-stream)
2008-10-16 13:15 PDT, Anantha Keesara
no flags Details

Note You need to log in before you can comment on or make changes to this bug.
Description Anantha Keesara 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
Comment 1 Anantha Keesara 2008-10-16 13:15:12 PDT
Created attachment 24406 [details]
reduction.zip
Comment 2 Tab Atkins 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.