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