Accessibility

CSS Advisor

Clear: both in combination with margin-top

by LoriHC (Dreamweaver Team) on September 11, 2006
Edited by: mkavitha on September 11, 2010
Avg Rating 4.3 (3)   |   Log in to rate post.

Tagged with Margin , Firefox 1.0 , Explorer 6.0 , Opera 7.x , Explorer 7.0 , margin-top , Opera , Firefox 1.5 , Firefox , clear , Opera 8.5 , Internet Explorer

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.

Firefox 1.0

Firefox 1.0

Firefox 1.5

Firefox 1.5


 

IE 6.0

Internet Explorer 6.0

IE 7.0

Internet Explorer 7


 

Opera 7 &; 8

Opera 7 and 8

Opera 9

Opera 9

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



Comments (2)

To add a comment, please Log in.




I recommend the following

I recommend the following to fix this:
http://www.quirksmode.org/css/clearing.html

WTF?

If you do an article on this issue, at least bother to find the solution...
This isn't worth a piece of CSS-smelling crap.





CSS Advisor home
Submit a post

rss

CSS ADVISOR RSS FEEDS
Recent: POSTS | COMMENTS | EDITS


Browsers
Internet Explorer (103)
Mozilla/Firefox (52)
Opera (18)
Safari (38)
CSS Properties
Background (25)
Border (10)
Color (10)
Float (23)
Font (6)
Margin (11)
Padding (9)
Position (40)
Text (30)
Width/Height (27)