Closed
Bug 246565
Opened 22 years ago
Closed 22 years ago
"clear" CSS property not working
Categories
(Core :: Layout: Floats, defect)
Tracking
()
RESOLVED
DUPLICATE
of bug 224057
People
(Reporter: timwi, Unassigned)
Details
Attachments
(1 file)
|
836 bytes,
text/html
|
Details |
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.6) Gecko/20040206 Firefox/0.8
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; en-US; rv:1.6) Gecko/20040206 Firefox/0.8
Consider the following example HTML file:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<style type="text/css">
div#firstfloatright {
margin: 0;
padding: 0;
float: right;
}
.firstHeading {
margin-bottom: 0;
border-bottom: 1px solid silver;
}
#clearboth { clear: both; }
.secondfloatright { float: right; }
</style>
</head>
<body>
<h1 class="firstHeading">Heading</h1>
<div>
<div id="firstfloatright">Right-floating text (1)</div>
<div id="clearboth"></div>
<div class="secondfloatright">Right-floating text (2)</div>
<p>text here</p>
</div>
</body>
</html>
Because of the <div id="clearboth"></div>, the two right-floating texts should
appear underneath each other, but instead it displays them next to each other.
Furthermore, it adds a margin between the heading and the first right-floating
element (I've added the border-bottom to make this more apparent) even though I
have specifically set all relevant margins to 0.
If you remove the outer <div>, it works fine. However, the outer div should not
have any effect at all. Therefore this is a bug.
Reproducible: Always
Steps to Reproduce:
|
||
Comment 1•22 years ago
|
||
Probably a duplicate of bug 224057.
The margin you see is caused by the p-tag, and it pulls somehow the floats down
with it (which is wrong).
|
|
||
Updated•22 years ago
|
Component: General → Layout: Floats
Product: Firefox → Browser
Version: unspecified → Trunk
|
||
Comment 2•22 years ago
|
||
reassign
Assignee: firefox → nobody
QA Contact: firefox.general → core.layout.floats
|
|
||
Comment 3•22 years ago
|
||
|
|
||
Comment 4•22 years ago
|
||
Martin is right...
dupe of "clear:both; doesn't work on :empty elements"
*** This bug has been marked as a duplicate of 224057 ***
Status: UNCONFIRMED → RESOLVED
Closed: 22 years ago
Resolution: --- → DUPLICATE
You need to log in
before you can comment on or make changes to this bug.
Description
•