Menu
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.
928
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.
165
You don't mention any other layout requirements you may have, but this would be a good start
content {position: relative; top: 95px}
Update
As the other good people state, <content> is not a valid HTML5 tag. Maybe it doesn't have to do with the specific question, but do follow their advice and avoid rolling your own tags. Use a standard one instead.
28
Follow those HTML5 tags, that are present. If you going to create your own, then that might have consequencies.
Here follow this.
<header>
</header>
<section>
</section>
<footer>
</footer>
To learn about valid HTML5 tags please follow this link.
35
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
