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

Home Forums CSS why is my internal div causing the outer divs to move with it.

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

    hi everyone.

    i am a bit confused about why my div are behaving the way they do and would really like some advice.

    i have two div elements on my page.

    . the main page div with a background image.

    and a small div that will be contained within the main div i.e;
    div id=body

    div id=body_wrapper

    p testing bodywrap p

    END div body WRAPPER

    END div id body

    my problem is this; when i code the wrapper div and give it a margin-top of 150px and a background colour , it drags the main page div down with it. i am not clear why it behave that way.

    i have enclose the code : u will note that the test body wrap div is dragging down the main page div; the main divs background colour should cover the whole page and not get dragged down with a div that is contained within it.

    warm regards



    Is that what you’re looking for?


    That’s the way margins collapse. [Here’s an article]( “uncollapsing margins”) that may help explain what’s happening.

    There are couple of things you can do. As kevin showed, you could zero the top margin on the #body-wrapper div and push it into place using padding on the #body div. But there are few other things that can be done, which may make more sense.

    You can apply a top padding or top border (or both, but not necessary) to #body and that will give #body-wrapper’s margin something to ‘push’ against.

    You could also add overflow: hidden to #body. This will change it’s block formatting context and #body-wrapper’s margin again will work as you had hoped.

    A couple of notes. One, a wrapper is usually the outmost element – it seems strange to have #body-wrapper inside of #body. Two, id’ing a div to #body just adds confusion considering the encompassing element has the same name. Three, in this example the #body div is not even needed. Just apply the background image to the body element. Four, there’s really no reason to comment the start of a particular div when it has an id.

    [Here’s a fork]( of your pen cleaned up a bit, using my last suggestion.



    kevin11189 and wolfcry911

    thank you so much for your kind advice and assistance. i will read the article in detail and try and understand why div margins collapse.

    my warmest thanks.

    warm regards


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