Question

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

Use padding on the header div rather than margin.

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