You’re viewing an archive of outdated material. Visit The Web Standards Project’s updated site to learn about our current mission.

XYZ Co. (Placement of Floats Demo)

This text should be the main body of the page. It should be below the blue stripe (which is an H1 element) at the top of the page (with a bit of space between). The blue header should run 60% of the way across the page. The olive floating menu at the left should only run 20% of the way across the page. See the reference rendering for an example of a correct rendering.

This is not what Opera does. Opera moves the olive floating element down to where the top of the text begins. The main text has a top-margin so that it starts below the blue heading. Opera moves the olive float and the blue heading down to be even with the text, even though the float and the heading come before the text in the HTML source.

Demo 3A and demo 3B should appear to be identical. The difference between demo 3A and demo 3B is that in demo 3B, the blue H1 element is floating, while in demo 3A, the blue H1 element does not float. However, the two tests have been designed to yield exactly the same results. In demo 3A, Opera incorrectly reduces the top margin of the H1.