title: Content is half hidden underneath fixed header, despite changing 'top' margin
body: <p>I have recently altered my header to stay fixed. The header is perfect, but it hides half of the content. I have tried changing the content's 'top' settings but it does not alter the result.</p>
  
  <p>THE HTML:</p>
  
  <pre><code>&lt;div class="gridContainer clearfix"&gt;
    &lt;div id="LayoutDiv1"&gt;We are here to help&lt;/div&gt;
    &lt;form action="website.php" method="POST"&gt;
    &lt;div id="LayoutDiv3"&gt;         Names:
             &lt;input type="text" name="user"/&gt;
             Gender&lt;FONT COLOR="#FF0000"&gt;*&lt;/FONT&gt;
      &lt;select name="Gender[]" double="double"&gt;
               &lt;option value="Female"&gt;Female&lt;/option&gt;
               &lt;option value="Male"&gt;Male&lt;/option&gt;
      &lt;/select&gt;
  
  &lt;/div&gt;
  
  
  &lt;div id="Components"&gt;&lt;/div&gt;
    &lt;div id="Food"&gt;&lt;h1&gt;Dietary conditions:&lt;/h1&gt;
  
    &amp;nbsp;Gluten Free
    &lt;input type="checkbox" name="GlutenFree" value="Yes" /&gt;
    &lt;br&gt;
    &amp;nbsp;&amp;nbsp; Diary Free
    &lt;input type="checkbox" name="DairyFree" value="Yes" /&gt;
    &lt;br&gt;
    &amp;nbsp;&amp;nbsp; No Softdrink
    &lt;input type="checkbox" name="NoSoftDrink" value="Yes" /&gt;
    &amp;nbsp;&lt;br&gt;
    &amp;nbsp;Halal
    &lt;input type="checkbox" name="Halal" value="Yes" /&gt;
    &amp;nbsp;&lt;br&gt;
    &amp;nbsp;Vegetarian
    &lt;input type="checkbox" name="Vegetarian" value="Yes" /&gt;
    &amp;nbsp;&amp;nbsp; &lt;br&gt;
  No Nuts
  &lt;input type="checkbox" name="NoNuts" value="Yes" /&gt;
    &amp;nbsp; &lt;br&gt;
    Other
  &lt;input type="checkbox" name="Other" value="Yes" /&gt;&lt;/div&gt;
  </code></pre>
  
  <p>THE CSS: </p>
  
  <pre><code>#LayoutDiv1 {
      position: fixed;
      height: 75px;
      top: 0;
      width: 100%;
      z-index: 10000;
      background:#FFF
  }
  
  #LayoutDiv3 {
      position: fixed;
      height: 30px;
      top: 75px;
      width: 100%;
      z-index: 10002;
      background:#FFF
  }
  
  #Components {
  
  top: 2000px; //Has no effect, and either does changing the 'top' setting for each div
                within 'components. 
  
  }
  </code></pre>
  
  <p>Thankyou</p>