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:
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: