Why does margin-top on this page push down more than just the div it’s in?

1 Views

http://christianselig.com/wp

I have a margin-top: 50px set to the .greeting class div, which is basically the big greeting image. But for whatever reason, it drags down the previous nav element for some reason, even though they’re not attached.

Read More

On my main site, http://christianselig.com, I have it (without WordPress implementation), so I’m confused what’s different here.

Post Views: 1

Related posts

Leave a Reply

4 comments

  1. Used to this css clear your header id 

    #masthead.site-header:after {
    clear: both;
    content: "";
    display: block;
    overflow: hidden;
}

    Result is

    enter image description here

  2. Margin Collapse

    The top margin of an in-flow block element collapses with its first in-flow block-level child’s top margin if the element has no top border, no top padding, and the child has no clearance.

    As a gross oversimplification:

    • margins between sibling elements (top & bottom) will collapse to the size of the larger margin.
    • margins in the same direction (top & bottom) between ancestor/descendant elements will collapse to the size of the larger margin if there is no padding, or border

  3. The #masthead is collapsing since all of its’ children (in this case only one) are floating, and therefore losing it’s layout properties.

    Add this:

    #masthead {
    overflow: hidden;
}

    Alternatively, remove the float property in your .main-navigation rule and replace it with overflow: hidden; instead. I don’s see a reason why this should be floating anyways.

  4. It’s caused by collapsing margins, but it’s somewhat unintuitive because the margin of your main content is collapsing with the <header> element above it. This happens because your header (#masthead) is ending up with zero-height. To correct this, just add overflow:hidden to the #masthead header element.

    #masthead { overflow:hidden; }

    That will cause #masthead to expand to include the floated nav element it contains, which in turn will prevent the margin from collapsing onto the #masthead header.