Pushing content below a position:fixed top nav so it's visible - html

Question

This problem arises when you are using a position:fixed top nav bar: Since the nav bar is out of the document flow, the initial content that you put after it will be hidden by the nav bar itself. This fiddle shows my solution which uses an extra spacer div and padding-top:
http://jsfiddle.net/MFwJT/
html
<div class="fixednav">some nav stuff</div>
<div class="navspacer"></div>
main content which should not be covered by nav
css
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { padding-top: 30px; } /* This works */
2 questions
Is there a better solution?
If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.
To clarify question 2, margin-top produces this:
whereas padding-top produces this (the correct behavior):

Answer 1

Is there a better solution
IMHO, better solution would be to avoid a fake spacer div navspacer and instead, go with the span as you can easily achieve your target with a single div, using line-height and without a fake div
Example Fiddle
CSS
.fixednav {
width: 100%;
height: 30px;
background: #999;
line-height:90px; /*this is the key here*/
}
.fixednav > span {
position:fixed;
display:block;
width:100%;
line-height:30px;/*this is the key here*/
}
HTML
<div class="fixednav">
<span>some nav stuff</span>
main content which should not be covered by nav
</div>
Question 2
If you change padding-top to margin-top, the nav bar behaves as if the spacer came before it rather than after it. I'd like to know why this happens.
when you give the padding-top: 30px;, it is applied to the inside of the content area, making the whole div height (30px + if anything is in content), check this demo to see it
when you give margin-top: 30px;, it is applied to the outside of the content, demo and the contents overlap as FIXED position divs do not follow the document flow but the viewport flow!!

Answer 2

The problem here is that you fixed the position of the fixednav but not the navspacer. When you do this, the fixednav and navspacer are on the same line since one is fixed and not the other. When you add padding to the navspacer, it pushes away the fixednav from it. When you add margin-top:30px; it moves the fixednav and navspacer together. To fix this, add a fixed position to the navspacer and add the content to the fixed navspacer:
/*html*/
<div class="fixednav">some nav stuff</div>
<div class="navspacer">main content which should not be covered by nav</div>
/*css*/
.fixednav { position:fixed; width: 100%; height: 30px; background: #999 }
.navspacer { position:fixed; margin-top: 30px; }
This will give you the correct behavior you are looking for.
Here is a link: http://jsfiddle.net/4vAgZ/
Also, this picture should help you with the padding vs. margin thing.
http://s3.amazonaws.com/codecademy-blog/assets/ae09140c.png
Hope this helps.

Answer 3

You can use a div for spacing like youtube does.
Here i made an example wich uses javascript to listen on window resizes and adjusts the spacer if necessary.
But you can also use this jQuery plugin for every single div.
//initial adjustment
$(function () { $('#topSpacer').height($('#fixedtop').height()); });
//adjustment on every resize event
$(window).resize(function () {
$('#topSpacer').height($('#fixedtop').height());
console.log("<div>" +$('#topSpacer').height() + "</div>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<div id="topSpacer"></div>
<div>
Does anyone overlay me?
</div>
<div id="fixedtop" style="position:fixed; top: 0px;">
Top navbar elements Page0000000000000 Page11111111111111 Page2222222222222
</div>
<div>
Another relative element
</div>