Grow your CSS skills. Land your dream job.

Why is Margin-top causing the background of a parent div to move down?

  • # October 1, 2012 at 5:26 pm

    Why is margin-top on div #about_mid causing the background of the parent div #main to move down?

    http://core-helmets.com/about-us/

    I want #main (background with circles) to line up correctly like it does on
    http://core-helmets.com/

    Thank you for the help :D

    # October 1, 2012 at 5:37 pm

    Because you didn’t use a float: left on the #main div

    # October 1, 2012 at 7:08 pm

    Thank you, that worked. Can you explain why that is? I’ve never come across this before. Thanks again

    # October 2, 2012 at 7:44 am

    It’s correct behavior for margins. The first child’s top margin will ‘escape’ out the top of the parent, effectively pushing the parent down. There are a couple of ways to prevent it from happening. If the parent has a top border or top padding, the child’s top margin will have something to ‘push’ against and not escape. Or if you change the block formatting context of the parent, it will fully contain the children (with margins). To change the BFC you could float the parent, give it a different positioning context, or add overflow:hidden (any one would work).

    # March 6, 2013 at 5:49 am

    Great tip. Thanks

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".