I would like to add some vertical space between a 100% wide float and
the next following div element. And so I added a margin-top to the
following div element to create this vertical spacing. In experimenting
with methods to achieve this spacing I have found an interesting
characteristic with certain clearing elements. I only tested this in
Mozilla 1.3.1 Mac os9 and so its difficult to draw any browser-wide
Naturally, the top margin of the following div element slides under the
preceeding floats - as it should - but I would like to prevent this in
And so I decided to use a clearing element to clear the float completely
so that the margin-top property of the next following div would function.
Only certain clearing elements work however.
In terms of using a clearing element to prevent margin collapse
surprisingly these common clearing techniques do not work:
<div class="clearer"> </div>
<div class="clearer"><!-- --></div>
<br class="clearer" />
However these clearing elements do work:
Very strange. Obviously there needs to be something substantial in the
clearing element. But why do only certain characters work?
Here is my experiment 
Clearing elements work fairly well to contain floats (although it seems
the perfect clearing element has yet to be found ), but unfortunately
they don't seem to work very well to prevent collapsing margins - unless
you actually put characters in them such as "b", "d" or "g" (or entire
words.) It is not ideal (not semantic) to have to put full words into a
clearing element and I would like to avoid this if possible.
Does anybody know how to make clearing elements behave better in
preventing margin collapse? Maybe I am using clearing elements for the
wrong purpose here and there is a better way to prevent margin collapse
that doesn't require a clearing element.
Thanks for any comments,
Burnaby, British Columbia
List wiki/FAQ -- http://css-discuss.incutio.com/
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/