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.
Andreea,
That's the way margins collapse. Here's an article 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.
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.
http://codepen.io/joe/pen/GJbxk
warm regards
Andreea
Is that what you're looking for?
http://codepen.io/kevin11189/pen/Alkda
Andreea, That's the way margins collapse. Here's an article 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.
hello
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
Andreea