title: website header hiding behind content when position is fixed
body: <p>I am designing a website for a school and I want the header of site to be fixed just like facebook has. I tried the fix provided by <a href="https://stackoverflow.com/questions/7573089/page-navigation-with-fixed-header">this</a> question on stackoverflow but it was hardly of any use in the header. I have an image, basically the logo of the school, where I do <code>position: fixed</code>, but
  the header hides behind the page.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
    &lt;div id="header" &gt; &lt;img src="images/iesheader_nnew1.jpg" /&gt;&lt;/div&gt;
  
      &lt;div id="menu"&gt;
        &lt;ul&gt;
             &lt;li&gt;&lt;a href="index.html"&gt;&lt;abbr title="Home"&gt;Home&amp;nbsp;&amp;nbsp;&lt;/abbr&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="aboutus.html"&gt; &lt;abbr title="About Us"&gt;About Us&amp;nbsp;&amp;nbsp;&lt;/abbr&gt; &lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="acad.html"&gt;&lt;abbr title="Academics"&gt;Academics&lt;/abbr&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="admin.html"&gt;&lt;abbr title="Administration"&gt;Administration&lt;/abbr&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="news.html"&gt;&lt;abbr title="News"&gt;News&lt;/abbr&gt;&lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="contact.html"&gt;&lt;abbr title="Contact Us"&gt;Contact Us&lt;/abbr&gt; &lt;/a&gt;&lt;/li&gt;
             &lt;li&gt;&lt;a href="photo.html"&gt;&lt;abbr title="Photo Gallery"&gt;Photo Gallery&lt;/abbr&gt; &lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;     
          &lt;div class="cleaner"&gt;&lt;/div&gt;
    &lt;/div&gt; 
  </code></pre>
  
  <p>CSS:   </p>
  
  <pre><code>#header {
      margin-left: 0px;
      width: auto;
      height: 90px;
      padding: 0px;
      padding-left:185px;
      font-size: 35px; color:#FFFFFF; 
      background-color: #f6c491;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
  }
  #menu {
      position: relative;
      clear: both;
      width: auto;
      height: 38px;
      padding: 0;
      padding-left:185px;
      background-color:#FFFFFF;   
      margin-bottom: 10px;
      margin-left:0px;
  }
  
  #menu ul {
      float: left;
      width: 960px;
      margin: 0;
      padding: 0;
      list-style: none;
  }
  
  #menu ul li {
      padding: 0px;
      margin: 0px;
      display: inline;
  }
  
  #menu a {
      float: left;
      display: block;
      padding: 8px 20px;
      font-size: 14px;
      font-weight: bold;
      text-align: center;
      text-decoration: none;
      color: #000;
      outline: none;
      border: none;   
      border-top: 3px solid black;
  }
  </code></pre>
  
  <p>I tried a number of solutions to that, but whatever I do, the header goes behind the page. I want the menu bar also to be fixed but it also is the same... </p>