The forums ran from 2008-2020 and are now closed and viewable here as an archive.

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

  • This topic is empty.
Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #40101

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

    I want #main (background with circles) to line up correctly like it does on

    Thank you for the help :D


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


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


    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).


    Great tip. Thanks

Viewing 5 posts - 1 through 5 (of 5 total)
  • The forum ‘CSS’ is closed to new topics and replies.