Closed
Bug 355522
Opened 19 years ago
Closed 18 years ago
An image with float:left will be positioned below another div that is float:right clear:right
Categories
(Core :: Layout, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: michaelpub, Unassigned)
Details
(Keywords: testcase)
Attachments
(2 files, 1 obsolete file)
an image just to show the float problem, any image will do in fact
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20060918 Firefox/2.0
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US; rv:1.8.1) Gecko/20060918 Firefox/2.0
An image with float:left will be positioned below another div that is float:right clear:right. This is a very specific case and I'm not sure what the standard should be, but IE will float the image in its div without regards to exterior divs on the page. Firefox floats the image in its div positioned vertically below other exterior divs.
A simple example shows the problem. It works correctly with IE 7 but not with Firefox 2.0beta2 or 2.0rc1.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<link href="simple.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="left" style="float: left; height: 100px; width: 100px; background: blue;">
left
</div>
<div id="right-top" style="float: right; min-height: 200px; width: 100px; background: purple;">
right-top
<div id="right-middle" style="float: right; min-height: 20px; width: 100px; background: yellow;">
right-middle
</div>
</div> <!-- right-top -->
<div id="right-bottom" style="float: right; clear: right; min-height: 100px; width: 100px; background: red;">
right-bottom
</div>
<div class="sometext">
<p>
<img id="image12" src="logo.jpg" style="float: left;">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</P>
</div> <!-- sometext -->
</body></html>
Reproducible: Always
Steps to Reproduce:
1. put the HTML code above into a new file
2. view it in firefox 2.0 and observe the image is towards the bottom, vertically even with the div "right-bottom"
3. edit the source and remove the clear:right from the div "right-bottom"
4. reload the page
5. observe that the image is correctly positioned in its div. The div "right-bottom" has also moved as a result of removing the clear style.
Actual Results:
image is positioned vertically after the div "right-bottom" with the style set to clear:right
then after the edit, the image is positioned correctly.
Expected Results:
the image should be positioned at the top of its div
verify the behavior with IE 7.
the workaround is to put the divs on the right side inside a div.
|
||
Comment 1•19 years ago
|
||
|
|
||
Updated•19 years ago
|
Component: General → Layout
Product: Firefox → Core
QA Contact: general → layout
Version: unspecified → 1.8 Branch
|
|
||
Comment 2•19 years ago
|
||
Oops. I suppose you need to attach the image too, reporter?
|
||
Comment 4•19 years ago
|
||
Reporter's testcase including image attachment 241337 [details]
Attachment #241336 -
Attachment is obsolete: true
|
||
Comment 6•18 years ago
|
||
This is the correct behaviour per CSS 2.1:
http://www.w3.org/TR/CSS21/visuren.html#float-position
quote:
5. 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.
--> Invalid
Status: UNCONFIRMED → RESOLVED
Closed: 18 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•