title: Header not touching top of screen
body: <p>I have a header on my page at the very top of the screen and extends across the entire screen. It is rendered as a rails partial. Whenever there is anything in the body of the page, the header gets pulled down and is no longer touching the top of the page. I can't seem to figure out what is causing this. It works fine when there is nothing in the body of the page.</p>
  
  <p>Here is the css</p>
  
  <pre><code>html{
    padding: 0;
    margin: 0;
  }
  
  body{
      background-color: #Dee0D5;
    margin:0;
    padding: 0;
  }
  #navwrap{
   width: 800px;
    margin: 0 auto;
    padding: 0; 
  }
  #nav {
      width: 100%;
    height:50px;
      float: left;
      padding: none;
      background-color: #859797;
    margin: 0 0 10px 0;
      box-shadow: 0 0 5px #999999;
  
  
      ul{
         list-style: none;
  
         li{
          display:inline;
          float:left;
          padding: 10px;
          font-family: sans-serif;
         }
      }
  }
  
  
  #wrapper {
  
      width: 700px;
      margin: 0 auto;
      text-align: left;
      height:auto;
  }
  
  #footer{
      width: 100%;
      float: left;
      padding: 0;
      margin: 0 0 0 1em;
      border-top: 1px solid #999999;
         li{
          display:inline;
          list-style-type:none;
          float:left;
          padding: 10px;
          font-family: sans-serif;
         }
  
  }
  </code></pre>
  
  <p>Here is the application html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Blog&lt;/title&gt;
    &lt;%= stylesheet_link_tag    "application", :media =&gt; "all" %&gt;
    &lt;%= javascript_include_tag "application" %&gt;
    &lt;%= csrf_meta_tags %&gt;
  
  &lt;/head&gt;
  &lt;body&gt;
  &lt;%= render 'layouts/header' %&gt;
  &lt;div id='wrapper'&gt;
  
  &lt;%= yield %&gt;
  
  &lt;%= render 'layouts/footer' %&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is the header html:</p>
  
  <pre><code>&lt;div id="nav"&gt;
      &lt;div id='navwrap'&gt;
      &lt;ul id='nav-list'&gt;
      &lt;li&gt;&lt;%= link_to 'Home', root_path %&gt;&lt;/li&gt;
      &lt;li&gt;&lt;%= link_to 'About', '#' %&gt;&lt;/li&gt;
      &lt;li&gt;&lt;%= link_to 'Projects', '#' %&gt;&lt;/li&gt;
      &lt;li&gt;&lt;%= link_to 'Blog', '#' %&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I'm sure I am just overlooking something simple, but its driving me nuts!</p>