Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

bigfatsumoguy

macrumors newbie
Original poster
Apr 11, 2004
3
0
I recently noticed something that I'm not sure is documented, nor am I sure
it's correct.

A two-column layout I've been working on has a smaller right column
float:left (very similar to http://www.simplebits.com except the column widths are
reversed). The only content in the left column are several identically
classed divs containing a thumbnail & some text. The divs simply wrap down
the column (because the column's width is the same as a thumnail div) & are
separated by its 5 pixel bottom margin; the width & height are set
explicitly.

Here's where it gets interesting. In all browsers this renders properly,
except for Konqueror/Safari (other khtml-based ones?). Apparently I had
been a little extra careful and had added 'clear:both' to the thumbnail divs
style just to be certain they would wrap (they aren't floated - but at one
time in an earlier build were).

All browsers seem to ignore the 'clear' because the divs arent floated and
the margin simply makes the box area larger. But in Konq/Saf 'clear' on a
non-floated element seems to tell the browser to ignore that margin
altogether and the divs rendered butted up against one another -- as if the
bottom margin had been set to 0.

A floated element with a margin is simply viewed as the size of the element
plus the margin (trying hard not to word this wrong). Why would a
non-floated element with a 'clear' attribute, which is intended to /clear/
an element below the total box size of a float, result in ignoring the
margin of the preceding non-floated element? Shouldn't a 'clear' attribute
result in completely ignoring everything if there are no floated boxes
whatsoever?

Screenshot:

clear-bug.jpg
 

Rower_CPU

Moderator emeritus
Oct 5, 2001
11,219
2
San Diego, CA
Got a link to a live page?

I've actually had the opposite problem where Firefox was ignoring a clear and everyone else was getting it right...
 

bigfatsumoguy

macrumors newbie
Original poster
Apr 11, 2004
3
0
Rower_CPU said:
Got a link to a live page?

I actually have it on a testing server & cannot put it live due to the client's request. I know it makes it harder to debug this way, but perhaps someone would like to try it themselves?

Here is a snippet of the left column style, along with the thumbnail div style. The left column floats left; right column position is set by its left margin. (once again refer to the http://www.simplebits.com layout)

Code:
#content-left {
	float: left;
	clear: left;
	margin: 0;
	padding: 1px 0 5px 5px;
	width: 221px;			/* box model hack */
		
	voice-family: "\"}\""; 
	voice-family:inherit;
	width: 211px;
	}
	
	html>#content-left {		/* opera kindness */
		width: 221px;
		}

/* thumbnail divs inside left content column */
div.button-thumb-left {
	background-color: #FFF;
	color: #497EA9;
	width: 215px;
	height: 119px;
	margin: 0 0 4px 0;		/* bottom space between thumbs */
	padding: 0;
	overflow: hidden;
	/* clear: left; 		--> this is the trouble line */
	}

	div.button-thumb-left img {
		float: left;
		width: 102px;
		height: 119px;
		margin: 0 5px 0 0;
		padding: 0;
		border-right: 1px solid #D4E8D0;
		}
 
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.