Position: fixed with vertical space

Question

What I have is a rather basic issue with position: fixed.

Here's a sample:

* {
    margin: 0;
    padding: 0;
}
.nav {
    width: 100%;
    height: 50px;
    background: #000;
    position: fixed;
}

.content {
    background: #ccc;
    width: 100%;
    height: 5000px;
}

<div class="nav"></div>
<div class="content">test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br />test<br /></div>

What I want is the scrolling to start below the black bar (with a fixed position).

Answer 1

Add padding to second div equal to height of second div.

.content {
    padding-top: 50px;
    background: #ccc;
    width: 100%;
    height: 5000px;
}

When you say scrolling below the back bar, it sounds like you want the content to begin below the back bar. So add some padding to second div to account for presence of fixed div.

Answer 2

Here's a more flexible way of accomplishing this that doesn't require the height of the fixed div to be known (though it is less semantic).

Simply duplicate the markup for the fixed element. Set the position of the first of the duplicated pair to fixed and the visibility of the second to hidden (also make sure the position of the second element is unset or relative). Here's an example:

* {
    margin: 0;
    padding: 0;
}
.nav {
    width: 100%;
    height: 50px;
    background: #000;
}
.fixed{position:fixed}
.filler{visibility:hidden}

.content {
    background: #ccc;
    width: 100%;
}

<div class="nav fixed"></div>
<div class="nav filler"></div>
<div class="content">
  
  First<br />
  Second<br />
  Third<br />
  Fourth<br />
  Fifth<br />
  Sixth<br />
  Seventh<br />
  Eigth<br />
  Ninth<br />
  
  <br /><br /><br /><br />
  <br /><br /><br /><br />
  <br /><br /><br /><br />

  Last<br />

</div>

Answer 3

Does this do it?

http://jsfiddle.net/Vqncx/

I just gave the 'content' DIV relative positioning and a y-axis from the top equal to the height of the 'nav' and then gave the 'nav' a z-index to keep it on top of the 'content'.

.nav {
 width: 100%;
 height: 50px;
 background: #000;
 position: fixed;
 z-index: 5;
}

.content {
 background: #ccc;
 width: 100%;
 height: 5000px;
 position: relative;
 top:50px;
}

Answer 4

You just need to add a top margin to your .content div equal to the size of the .nav block + some padding:

.content {
    margin-top: 60px;
    background: #ccc;
    width: 100%;
    height: 5000px;
}