March 15, 2011
Position fixed content overlapping problem
Question by saorabh
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 by Marcel
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.
