title: Anchor links to start below the header which is fixed at the top
body: <p>I have a page which has a fixed header at the top, which is 63px in height.
  below this I have different sections of the page (divs) which are in essence separate pages.
  Each section is linked in the header as an anchor link to the relevant div id.
  The problem I am having is that when the anchor link is clicked the top of the div starts right at the top of the document, rather than underneath the header. 
  Any solution would be very helpful indeed.</p>
  
  <p>CSS CODE FOR THE HEADER:</p>
  
  <blockquote>
  <pre><code>#headercontainer{
  position:fixed;
  background-color:#1a1813; 
  top:0px;
  left:0px;
  width:100%;
  height:63px;
  z-index:1;}
  </code></pre>
  </blockquote>
  
  <pre><code>#headercontent{
  position:relative;
  background-image:no-repeat; 
  top:0px;
  left:0px;
  width:1280px;
  margin-left:auto;
  margin-right:auto;}
  </code></pre>
  
  <p>CSS CODE FOR THE FIRST SECTION (THAT SHOULD BE BELOW THE HEADER WHEN THE ANCHOR IS CLICKED:</p>
  
  <pre><code>#landingcontainer{
  margin-top:63px;
  position:relative;
  width:100%;
  height:700px;
  background-color:#000000;}
  
  #landingcontent{
  position:relative;
  width:1280px;
  height:700px;
  margin-left:auto;
  margin-right:auto;
  background-image:url("../images/landing/landing_bg.png");
  background-repeat:no-repeat;
  </code></pre>
  
  <p>}</p>
  
  <p>HTML UP TO POINT NEEDED:</p>
  
  <pre><code>&lt;!-- START BODY CONTAINER --&gt;
  &lt;div id="bodycontainer"&gt;
      &lt;!-- START HEADER --&gt;
      &lt;div id="headercontainer"&gt;
          &lt;!-- START HEADER CONTENT --&gt;
          &lt;div id="headercontent"&gt;
              &lt;div id="headerbg"&gt;
                  &lt;a href="#landingcontainer"&gt;&lt;div id="headerlogo"&gt;&lt;/div&gt;&lt;/a&gt;
                  &lt;div id="headercard"&gt;&lt;/div&gt;
                  &lt;div id="headernavigation"&gt;
                      &lt;ul&gt;
                          &lt;a href="#menucontainer"&gt;&lt;li&gt;Menu&lt;/li&gt;&lt;/a&gt;
                          &lt;li&gt;Sauces&lt;/li&gt;
                          &lt;li&gt;Ranches&lt;/li&gt;
                          &lt;li&gt;Order&lt;/li&gt;
                          &lt;li&gt;Franchise&lt;/li&gt;
                          &lt;li&gt;About&lt;/li&gt;
                      &lt;/ul&gt;
                  &lt;/div&gt;
                  &lt;div id="headersociallinks"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;!-- END HEADER CONTENT --&gt;
      &lt;/div&gt;
      &lt;!-- END HEADER --&gt;
  
      &lt;!-- START LANDING SECTION --&gt;
      &lt;div id="landingcontainer"&gt;
  </code></pre>