title: Positioning a "wrapper" div underneath a fixed navigation bar?
body: <p>I've started work on a brand new site and i've been playing around with designs for a while, however one problem I seem to be having is regarding positioning a navigation bar with a full screen width that is fixed to scroll. Underneath i have created a <code>div</code> called "wrapper" which is set to centre at a width of <code>980px</code>. Below is code example;</p>
  
  <pre><code>&lt;style&gt;
      #navBar {
          background: RGB(0, 0, 0);
          height: 30px;
          position: fixed;
          width: 100%;
      }
  
      #wrapper {
          margin: 0 auto;
          width: 980px;
      }
  &lt;/style&gt;
  
  &lt;div id="navBar"&gt;
  
  &lt;/div&gt;
  
  &lt;div id="wrapper"&gt;
      &lt;div style="border: 1px solid RGB(0, 0, 0); float: left; height: 500px; margin: 5px; width: 400px;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The box i created within "wrapper" SHOULD (obviously isn't because i'm doing something wrong - somewhere) sit <code>5px</code> below the <code>navBar</code>, however because I have used <code>position: fixed</code> it sits underneath it instead. Could anybody lead me to how I solve this issue and have it so that the wrapper sits directly below rather than underneath the navbar whilst maintaining it's centering?</p>