284422 - When using css float: left; for an image in a text, the image is not set properly when there are other areas of text floating beside the area where the image should is displayed

Status: RESOLVED INVALID

(Core :: Layout, defect)

Description

[Marc]

User-Agent:       Mozilla/5.0 (Windows; U; Windows NT 5.1; de-DE; rv:1.7.6) Gecko/20050226 Firefox/1.0.1
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; de-DE; rv:1.7.6) Gecko/20050226 Firefox/1.0.1

An image in a div is set to appear on the top of another div floating right of
the div the image is in.
(see attachment for a demonstration)

Reproducible: Always



Expected Results:  
The image should appear at the place the image tag is inside the text as it does
without using "align". 
The page validates as XHTML 1.0 strict and is shown in standards compliance mode.

Comment 1

[Marc]

Attachment: demonstration for the align error

Comment 2

[Paul F.]

(In reply to comment #1)

In the attachment, if you move the <div id="info2"> block below the <div
id="content"> block, it seems to work properly with the image at the top of the
content.

Comment 3

[Marc]

But then, if you shorten the text in info1, info2 will no longer be directly
under it, but will start below the content.

Comment 4

[José Jeria]

HOw about minimizing that testcase. It can be made much smaller.

Comment 5

[Marc]

Attachment: testcase

Ok, here's a smaller version.

Comment 6

[José Jeria]

Attachment: Smaller testcase

Comment 7

[Boris Zbarsky [:bzbarsky]]

So... What is the bug, exactly?  The last testcase shows that when a floated
image is replaced by its alt text we don't float the alt text.  Is that the
issue?  If not, please attach a testcase that shows the problem that this bug is
actually filed on (using https://bugzilla.mozilla.org/mozilla-banner.gif as the
image as needed).

Comment 8

[Marc]

Attachment: testcase

It's not only the alt text that is not floatet. The alt text is placed where
the image is shown (if it is loaded). And both are not placed correctly. The
image (or alt text) should be left-top in front of the text.

Comment 9

[Boris Zbarsky [:bzbarsky]]

No, in that testcase the top of the left-floated image should be even with the
top of "right float 2".  See
<http://www.w3.org/TR/CSS21/visuren.html#float-position> and particularly rule 5
of the "Here are the precise rules that govern the behavior of floats:" list,
which says:

  The outer top of a floating box may not be higher than the outer top of any
  block or floated box generated by an element earlier in the source document.

(in your case both of the right floats are earlier in the source document, and
the content div does not define a new block formatting context, so this rule
applies).

Marking invalid, if that's the testcase showing the bug...

Comment 10

[Marc]

(In reply to comment #9)

> which says:
> 
>   The outer top of a floating box may not be higher than the outer top of any
>   block or floated box generated by an element earlier in the source document.
> 
> (in your case both of the right floats are earlier in the source document, and
> the content div does not define a new block formatting context, so this rule
> applies).
> 

After this rule the floating image can not be higher than any of the right
floats. But here it is not higher than the last right float which came directly
before the image. The image should not be higher than any of the floats but have
the same top as the first right float. As I understand this rule this should be
possible.

Comment 11

[Boris Zbarsky [:bzbarsky]]

> After this rule the floating image can not be higher than any of the right
> floats. 

More precisely, given any right float, the image cannot be higher than it.  So
it can't be higher than the last right float.

> but have the same top as the first right float

Then it would be higher than the second float, violating the rule in question.

Comment 12

[Marc]

Well, ok. But then there is no way to have a layout with 2 coloumns and one of
this coloums be parted in 2 areas where there is a floating image in the other area?
'Cause thats exactly what I wanted to do with this combination.

Comment 13

[José Jeria]

(In reply to comment #12)
> Well, ok. But then there is no way to have a layout with 2 coloumns 

There are several alternatives how to achieve this, here is one example:
http://www.bluerobot.com/web/layouts/

Just google this and you will get tons of hits

Comment 14

[Marc]

> > Well, ok. But then there is no way to have a layout with 2 coloumns 
> 
> There are several alternatives how to achieve this, here is one example:

It's not only about having 2 coloumns. I already have 2 coloumns. But even when
using the Three Column Layouts from your link you will run into the same
problems I posted as bug here. Because in the rightmost coloumn there you won't
be able to have a floating image at the beginning of the text.
The problem is only about floating images.

Comment 15

[Boris Zbarsky [:bzbarsky]]

Just make sure all the columns are block reflow context roots (the CSS spec has
several ways to accomplish this).