Clear property interacts with elements out of its containing box

RESOLVED INVALID

Status

()

Core
Layout: Floats
RESOLVED INVALID
9 years ago
9 years ago

People

(Reporter: mozillabugs, Unassigned)

Tracking

Firefox Tracking Flags

(Not tracked)

Details

(Reporter)

Description

9 years ago
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
Last Resolved: 9 years ago
Resolution: --- → INVALID
You need to log in before you can comment on or make changes to this bug.