CODEWITHSUNDEEP
html
Aakansha
Aakansha

Reputation: 559

Fixed header overlays main content

I am trying to make my header fixed for that in the header div I am adding position:fixed and width:100%

Now after doing this, my main content overlays on header. So as a fix, I found on search that in main-content div I can add margin-top equivalent to height of header.

When I am doing this, I am getting my header shifted. As in suppose if I add margin-left as 100px. My header top shifts by 100px and main content still overlays on header content.

Any fix?

Upvotes: 5

Views: 8651

Answers (2)

Ashish Kumar
Ashish Kumar

Reputation: 3039

Just add the margin in the content from the top equal to the header height and z-index to your header if fixed.

HTML:

<div class="header">Header</div>
<div class="content">Content</div>

CSS:

.header{
    background:#F00;
    height:100px;
    position:fixed;
    top:0;
    width:100%;
    z-index:10
}
.content{
    background:#0C0;
    margin-top:100px;
    height:2000px;
}

jsfiddle: http://jsfiddle.net/ashishanexpert/epKv8/

I would never suggest to add position: absolute; in content div.

Upvotes: 3

Zword
Zword

Reputation: 6787

Give this css to your main-content div:

#main-content /* replace # with . if its a class*/
{
position:absolute;
top:/*height of header*/;
left:0px;
}

Its working correctly for me.See this fiddle: http://jsfiddle.net/xPutK/1/

Use z-index property of css to adjust depth of elements.

Upvotes: 0

Related Questions