html - Moving DOM elements below a fixed navigation bar

Question

I have a fixed navigation bar, however, any time I try to create content after it, the content clips the navigation.

I could fix this by using relative positioning on the content, but I would really prefer NOT to do that.

How can I push content below a fixed navigation bar without resorting to strange CSS tactics?

Example Navigation:

nav{
    position:fixed;
    top:0;
    width:100%;
    border:1px solid black;
}

Putting the content class may have been misleading, Essentially, I want DOM elements to flow after the nav bar without clipping it. For example, imagine the following HTML coming after the nav:

<section>foo</section>
<p>bar</p>
<h2>fubar</h2>
<div>blah blah blah </div>

I would like to see the section come after the nav bar, and then the p after the section and so forth.

Original Example Problem (Not Reflective of the problem): http://jsfiddle.net/wZHcv/

New Fiddle: http://jsfiddle.net/4MLVT/

Answer 1

You can put nav inside a div , then set the height of the div by nav height. The advantage of this: easier and more meaningful,and In other places you can use other code without concerns..

<div class="nav-box">
    <nav>
        <ul>
            <li><a href="#">foo</a></li>
            <li><a href="#">bar</a></li>
        </ul>
    </nav>
</div>

EXAMPLE