1. Home
2. Developer Center
3. Dreamweaver Developer Center
4. CSS Advisor

CSS Advisor

Clear: both in combination with margin-top

Problem

The browser makers disagree on how to display a negative top margin on a clearing element, and it's not entirely clear which one gets it right.

Solution

Avoid using margin-top and clear: both on the same element.

Detailed description

The following screenshots show the same page viewed in Firefox 1.0 and 1.5, IE 6 and 7, and Opera 7/8 and 9 (all on Windows). The red, green, purple, and yellow boxes below the 25px-square gray floats all have clear: both set, as well as the margin-top value indicated. The blue box does not have any clear property set; instead, a separate (empty) <;div>; with clear: both appears in the code between the floats and the blue box.

 

 

None of the browsers behave exactly as expected in all cases of clear + margin-top, if we define expected as the greater of [height of float being cleared] and ([margin-top value] + [height of float being cleared]). (See the flow control part of the CSS2 spec, where it says that ";Clearance is introduced as spacing above the margin-top of an element. It is used to push the element vertically (typically downward), past the float."; That section also adds the somewhat confusing explanation, ";Computing the clearance of an element on which 'clear' is set is done by first determining the hypothetical position of the element's top border edge within its parent block. This position is determined after the top margin of the element has been collapsed with previous adjacent margins (including the top margin of the parent block)."; (I find this confusing because it seems to contradict the previous assertion, though perhaps I'm just not able to wrap my mind around what should be happening.)

In any case, what we're left with is behavior that varies from browser to browser (and version to version). An argument can be made that each browser gets at least one example right—;and it's possible that one of them gets all of the examples right—;but since none of them agree on all of the examples, it's probably best to avoid clear:both in combination with margin-top altogether.

Live demo

The styles used for the screenshots above and the live demo below are as follows:

.floats { width: 25px; height: 25px; background-color: #CCCCCC; border: 1px

Text ID: CLEAR__BOTH_IN_COMBINATION_WITH_MARGIN_TOP

---