Content is half hidden underneath fixed header, despite changing 'top' margin

Question

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.

THE HTML:

<div class="gridContainer clearfix">
  <div id="LayoutDiv1">We are here to help</div>
  <form action="website.php" method="POST">
  <div id="LayoutDiv3">         Names:
           <input type="text" name="user"/>
           Gender<FONT COLOR="#FF0000">*</FONT>
    <select name="Gender[]" double="double">
             <option value="Female">Female</option>
             <option value="Male">Male</option>
    </select>

</div>


<div id="Components"></div>
  <div id="Food"><h1>Dietary conditions:</h1>

  &nbsp;Gluten Free
  <input type="checkbox" name="GlutenFree" value="Yes" />
  <br>
  &nbsp;&nbsp; Diary Free
  <input type="checkbox" name="DairyFree" value="Yes" />
  <br>
  &nbsp;&nbsp; No Softdrink
  <input type="checkbox" name="NoSoftDrink" value="Yes" />
  &nbsp;<br>
  &nbsp;Halal
  <input type="checkbox" name="Halal" value="Yes" />
  &nbsp;<br>
  &nbsp;Vegetarian
  <input type="checkbox" name="Vegetarian" value="Yes" />
  &nbsp;&nbsp; <br>
No Nuts
<input type="checkbox" name="NoNuts" value="Yes" />
  &nbsp; <br>
  Other
<input type="checkbox" name="Other" value="Yes" /></div>

THE CSS:

#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. 

}

Thankyou

Answer 1

You need to change the top: to margin-top.

#Components {

    margin-top: 120px; 

}

Check this http://jsfiddle.net/Vj799/

Note:

top will not work with static elements.

You can use top with position: relative|fixed|absolute

More over here https://developer.mozilla.org/en-US/docs/Web/CSS/top