CSS: Problems with margin-top in Firefox

In the html page below, the top-margin of 100px in "gallery" gets applied to "container" instead.Why is that, and how do I fix it? It works correctly in IE7.


gabrielPennybackReliability Business Tools Analyst IIAsked:
Who is Participating?
Jason C. LevineConnect With a Mentor No oneCommented:

I know there's a reason for this and will try to dig it up for you, but here's the workaround:

<style type="text/css">
#container {
      font-family: "Gill Sans MT";
      font-size: 14px;
      margin: 0 auto;
      height: 700px;
      width: 890px;
      margin-top: 20px;
      background-color: #CCCCFF;
      padding-top: 100px;
#header {
      height: 100px;
      width: 890px;
      margin: 0 auto;
      background-image: url(images/BluishHeader2.jpg);
#gallery {
      background-color: #FFFFFF;
      height: 100px;
      width: 400px;
      margin: auto;

Remove the margin from gallery and instead use padding in container to push the div into position.
mreuringConnect With a Mentor Commented:
The reason is in one word "margin-collapse" (or does that count as two?)

That's about where my explanation ends. After 8 years of css experience margin-collapse is still not 100% clear. Suffice to say, quite often it's a pain, but that's only because in the other 99 out of a 100 situations it works so well you don't realise what it's doing for you :)

The known work-arounds:
- Use padding instead of margin, as suggested  by Jason (http:#20854301)
- Place a border on the edge where the margin 'collapses' borders prevent margin-collapse.
Jason C. LevineNo oneCommented:
Thanks, mreuring.  
gabrielPennybackReliability Business Tools Analyst IIAuthor Commented:
Thanks to both of you. Great suggestions that a) work b) add to my knowledge of CSS.

So thanks!

All Courses

From novice to tech pro — start learning today.