Closed
Bug 459736
Opened 16 years ago
Closed 16 years ago
Clear property interacts with elements out of its containing box
Categories
(Core :: Layout: Floats, defect)
Tracking
()
RESOLVED
INVALID
People
(Reporter: mozillabugs, Unassigned)
Details
User-Agent: Mozilla/5.0 (Windows; U; Windows NT 5.0; nl; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3
Build Identifier: Mozilla/5.0 (Windows; U; Windows NT 5.0; nl; rv:1.9.0.3) Gecko/2008092417 Firefox/3.0.3
Create a layout with say 3 colunms and with the left and right column floating.
If you use a clear on an image or something in the center column it clears under the larger of the two colums instead of the image.
ie the clear works outside of its containing element, which is not what you want and does not allow you to use clear in your content (what it was designed for) if you use floating side colums.
Reproducible: Always
Steps to Reproduce:
1.copy past the additional information to a file an look at the results
Actual Results:
Clear clears under the side columns (see example)
Expected Results:
Clear should clear under the image and not to something outside of its containing element.
<html>
<head>
<style>
#main {
width: 500px;
}
#menu {
background-color: PaleGreen;
float: left;
width: 100px;
}
#content {
background-color: PaleGoldenRod;
margin-left: 100px;
margin-right: 100px;
width: 294px;
}
#teaser {
background-color: PowderBlue;
float: right;
width: 100px;
}
#footer {
background-color: MistyRose;
clear: both;
}
img.right {
float: right;
border:solid blue 2px;
height: 80px;
}
div.clear {
clear: both;
}
</style>
</head>
<body>
<div id="main">
<div id="teaser">
Suspendisse in erat. Cras sagittis,
sapien vulputate bibendum aliquam,
urna dolor posuere augue, ac
imperdiet purus sapien ac sapien.
Vestibulum urna. Aenean semper
suscipit magna. Aliquam scelerisque
odio et orci. Donec risus.
</div>
<div id="menu">
Aenean semper suscipit magna. Aliquam
scelerisque odio et orci. Donec risus.
Pellentesque tempus fringilla odio.
In porttitor suscipit pede. Maecenas
quis metus in lorem fringilla tempor.
Proin tincidunt tortor non nunc.
</div>
<div id="content">
<img class="right">
Curabitur placerat velit nec tellus.
<div class="clear"></div>
Suspendisse porta. Morbi felis lacus,
iaculis in, tincidunt vel, tincidunt
et, est. Nam molestie justo vel eros
fringilla rutrum. Praesent nisi lacus,
condimentum id, sagittis ac, dictum
quis, lacus. Praesent rhoncus, nibh
sit amet condimentum aliquam, lectus
lacus condimentum sem, vitae congue
lacus urna nec dui. Pellentesque nec
mauris porttitor diam dapibus pellentesque.
Integer ultricies felis ut nibh.
Sed nunc turpis, consequat id, bibendum
vitae, pharetra et, lacus. Nulla
ornare enim sit amet arcu sollicitudin
vestibulum. Aliquam tempor orci at
lectus. Cras massa urna, viverra quis,
ornare ac, porttitor id, dui.
Praesent nec velit. Nullam ultricies
lorem quis magna. Cras elementum.
Aenean luctus, dui nec ornare ultricies,
nibh turpis dignissim dolor, ut
pretium massa mauris eu sem. Donec laoreet,
dolor pulvinar volutpat volutpat,
massa est pharetra tellus, sed egestas
erat erat eget ipsum. Maecenas
faucibus tempus eros. Praesent tempus.
</div>
<div id="footer">
Praesent rhoncus, nibh sit amet condimentum
aliquam.
</div>
</div>
</body>
</html>
clear is supposed to apply to all floats in the same block formatting context; normal blocks (non-floating) do not establish new block formatting contexts. See http://www.w3.org/TR/CSS21/visuren.html
Status: UNCONFIRMED → RESOLVED
Closed: 16 years ago
Resolution: --- → INVALID
You need to log in
before you can comment on or make changes to this bug.
Description
•