All four boxes are identical.  But in Mozilla, the top box overlaps its header, and in Internet Explorer, the bottom 3 boxes render their headers using the bottom-margin from the footer.  Why?

Fixes so far:

• Adding a border to either the header DIV or the clearthebottom DIV fixes the problem.  This is not ideal since I don't actually want borders there.
• Setting BODY's padding-top greater than zero fixes the Mozilla problem.
• Setting width to 100% and line-height to 0px in the clearthebottom DIV fixes the IE problem.