why is div inheriting the property of sub div?

Question

hi there,

in the header section of my web page, the design is something like the logo and navigation div should overlap a repeat-x image(i.e bg-header).

this is the html i have used

<div id="header">
    <div id="header-bar">
        <p>kljslakdjlaskjdkljasdlkjasdlkjaskldjasjd</p>
    </div>
</div>

and this is the css

#header {
    min-width: 1040px;
    height: 111px;
    position: relative;
}
#header-bar {
    margin-top:50px;
    height:53px;
}

now when in the #header-bar if i give margin-top:50px then the header div shifts the position to 50px from top. i want to achieve something like

the header div is to define the height of the header content.

i want to wrap header-bar in the header div and the elements or the div wrapped inside the header div should should have the margin of 50px from within the header.

for example the header-bar should have a margin of 50px from the top of the header div.

when i use the above code it moves the position of header div too. i want the header div to be fixed on top only the sub div or content within the header div is what i want to position.

hope i am not confusing you.

where i am going wrong?

thank you

EDIT: it works if i use padding-top but excluding the background with repeat-x property.

i want to move the image with repeat-x property. in the header-bg div

Answer 1

Margin doesn't affect the position of elements relative to their parents.

To achieve the effect you want, you need to use padding on the #header, for example:

#header {
    min-width: 1040px;
    height: 61px;
    position: relative;
    padding-top: 50px;
}
#header-bar {
    height:53px;
}

Answer 2

Use padding on the header div rather than margin.

#header {
    min-width: 1040px;
    height: 111px;
    padding:50px 0px 0px 0px;
}
#header-bar {
    height:53px;
}

Answer 3

If you add "overflow:hidden" to the #header div, it'll work like a charm! Note that there is padding, but also margin. If you remove the padding, there will still be space left, that's the margin!

Jsfiddle example here

Answer 4

You're running into something called margin-collapse. In essence, adjacent margins will collapse together, and only display the larger one - that is, the one with more absolute distance from 0. Since your #header margin (0px) is adjacent to your #header-bar margin (50px), the 50px margin is the one that is displayed, and it affects both of your elements.

If you were to add even 1px of padding to the top of #header, you would get the desired effect:

#header {
    min-width: 1040px;
    height: 111px;
    position: relative;
    padding-top: 1px;
}

Answer 5

I'm not sure I understood the question.

Does it seem like your answer : link ?