Closed
Bug 428768
Opened 16 years ago
Closed 16 years ago
Wrong rendering of content of floating container
Categories
(Core :: Layout: Floats, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: r_rom, Unassigned)
Details
Attachments
(5 files)
very short paragraph
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9pre) Gecko/2008041206 Minefield/3.0pre Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US; rv:1.9pre) Gecko/2008041206 Minefield/3.0pre Consider the following code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta content="text/html; charset=utf-8" http-equiv="Content-Type"> <title>Untitled 1</title> <style type="text/css"> html, body { width: 100%; height: 100%; } </style> </head> <body style="background: green;"> <div style="background: gray; position: relative; float: left;" id="container"> <img style="float: left;" src="mousecat.jpg"> <p>paragraph content paragraph content paragraph content paragraph content paragraph content paragraph content paragraph content paragraph content </p> </div> </body> </html> I will attach screen shots to demonstrate what I am saying here. The code above should display the paragraph's content to the right of the image when this content is small, and when it's large, some of it should flow under the image. However, here's what I observe: - when there's little content in the paragraph, it's displayed under the image; - when it grows sufficiently, it moves up -- where it should've started. - when the paragraph is displayed to the right of the image, the paragraph doesn't occupy all available horizontal space and grows vertically when there's no need for it. Firefox 2, Opera 9.27, and IE 7 display this correctly. Reproducible: Always
Yes, I would have expected the preferred width to include the text.
... but in this case, the text is in a different block child --- <p> --- so the heuristic we use for calculating preferred widths for float containers assumes the text may be on a different line from the float. So this behaviour is known and intentional. You can work around this by putting the float inside the <p>.
Status: UNCONFIRMED → RESOLVED
Closed: 16 years ago
Flags: blocking1.9? → blocking1.9-
Resolution: --- → WONTFIX
Actually I'll make this invalid since our rendering is not contrary to any spec.
Resolution: WONTFIX → INVALID
http://www.w3.org/TR/CSS21/visuren.html#floats: "Since a float is not in the flow, non-positioned block boxes created before and after the float box flow vertically as if the float didn't exist." (In reply to comment #6) > You can work around this by putting the float inside the <p>. Doing this isn't always semantically correct, and doing things that ruin semantic correctness to achieve a desired appearance is a thing of the past... or should be. Since Firefox 3 differs from FF 2 in this regard (and God knows how many more), now we'll have to use hacks for different versions of Firefox as is done for Internet Explorer. Please reconsider.
Status: RESOLVED → UNCONFIRMED
Resolution: INVALID → ---
You'll probably find that Safari behaves the same as FF3. Trust me, we thought hard about this. The spec does *not* say how the width of the outer float should be computed.
Status: UNCONFIRMED → RESOLVED
Closed: 16 years ago → 16 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•