kumars kumars - 6 months ago 32
HTML Question

Position fixed content overlapping problem

This is my html5 markup

<div id="header">
</div>
<div id="content">
</div>
<div id="footer">
</div>


Now used css

header{ height: 95px;position: fixed;width: 100%;min-width: 980px;}
footer{background:#000000;bottom:0;height:30px;position:fixed;width:100%;min-width: 980px}


Now my problem is when i put any content inside

<div id="content">
</div>


The content comes from top:0 which is not required. I dont want to use padding or margin top over content. Is there any way from which content comes below header.

Answer

The main reason is because the <header> is position:fixed taking it out of the document flow. You'll need to add margin or padding to either the <body> or your <content>(??) element. Also, if using HTML5 elements, add this to the top of your CSS rules for compatibility with older browsers.

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
    display: block;
}

Taken from Eric Meyer's CSS Reset.