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.
(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.
But then, if you shorten the text in info1, info2 will no longer be directly under it, but will start below the content.
HOw about minimizing that testcase. It can be made much smaller.
Created attachment 176114 [details] testcase Ok, here's a smaller version.
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).
Created attachment 176240 [details] 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.
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...
(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.
> 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.
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.
(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
> > 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.
Just make sure all the columns are block reflow context roots (the CSS spec has several ways to accomplish this).