Wrong rendering of content of floating container

RESOLVED INVALID

Status

()

Core
Layout: Floats
RESOLVED INVALID
10 years ago
10 years ago

People

(Reporter: Roman R., Unassigned)

Tracking

Trunk
x86
Windows Vista
Points:
---
Bug Flags:
blocking1.9 -

Firefox Tracking Flags

(Not tracked)

Details

Attachments

(5 attachments)

(Reporter)

Description

10 years ago
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
(Reporter)

Comment 1

10 years ago
Created attachment 315360 [details]
very short paragraph
(Reporter)

Comment 2

10 years ago
Created attachment 315361 [details]
paragraph is growing but is still small
(Reporter)

Comment 3

10 years ago
Created attachment 315362 [details]
paragraph has moved up
(Reporter)

Comment 4

10 years ago
Created attachment 315363 [details]
a little larger
(Reporter)

Updated

10 years ago
Flags: blocking1.9?
Version: unspecified → Trunk
Created attachment 315451 [details] [diff] [review]
Modified testcase

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
Last Resolved: 10 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
(Reporter)

Comment 8

10 years ago
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
Last Resolved: 10 years ago10 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.