title: Header overlapping body content
body: <p>So I'm working on a layout and have completed the header. When I started working on the body content, I kept running into the issue where the header would overlap the body unless I set a top margin of the body wrapper to something huge (300+px) even then it can overlap when the screen is small. I think I have screwed up the positioning somewhere but I can't seem to figure out how to overcome this.</p>
  
  <p>My HTML:</p>
  
  <pre><code>&lt;body&gt;
  &lt;div id="pageWrapper"&gt;
  &lt;div id="mainHeader"&gt;
  &lt;div id="mainNav"&gt;
  &lt;div id="navContent"&gt;
  &lt;div class="mainLogo"&gt;&lt;/div&gt;
  &lt;div style="display: inline-block;"&gt;
  &lt;ul&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/dashboard.png" /&gt;Dashboard&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/patient.png" /&gt;Patients&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/devices.png" /&gt;Devices&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/account.png" /&gt;Account&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img class="navIcons" src="http://lifeview.michiganweb.org/img/icons/support.png" /&gt;Support&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="lvpLogo"&gt;&lt;strong&gt;LifeView&lt;/strong&gt; Portal&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="subNav"&gt;
  &lt;span class="loginName"&gt;Doctor Brian Town&lt;/span&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id="bodWrap"&gt;
  &lt;div class="statWrap"&gt;&lt;div class="titleWrap"&gt;&lt;span&gt;Chronic Disease Summary&lt;/span&gt;&lt;/div&gt;
  &lt;img src="http://lifeview.michiganweb.org/img/icons/support.png" /&gt;&lt;img src="img/icons/account.png" /&gt;&lt;img src="http://lifeview.michiganweb.org/img/icons/devices.png" /&gt;&lt;img src="http://lifeview.michiganweb.org/img/icons/patient.png" /&gt;
  &lt;/div&gt;
  &lt;div class="statWrap"&gt;&lt;div class="titleWrap"&gt;&lt;span&gt;Vital Summary&lt;/span&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;div class="statWrap"&gt;&lt;div class="titleWrap"&gt;&lt;span&gt;Alerts&lt;/span&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>My CSS:</p>
  
  <pre><code>@charset "utf-8";
  body {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 14px;
  }
  .pageWrapper {
  width: 100%;
  position: fixed;
  }
  .mainLogo {
  background:url(http://lifeview.michiganweb.org/img/home_02.png) no-repeat left;
  height: 77px;
  width: 300px;
  display: inline-block;
  margin-left: 26px;
  margin-right: 30px;
  float: left;
  }
  #mainHeader {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  border: 1px;
  }
  #mainNav {
  /*height: 109px;*/
  width: 100%;
  float: left;
  left: 0px;
  margin: 0px;
  padding: 0px;
  color: #FFFFFF;
  /*background:url(http://lifeview.michiganweb.org/img/home_01.jpg) repeat-x scroll top;*/
  /* IE10 Consumer Preview */ 
  background-image: -ms-linear-gradient(top, #0e448e 0%, #2b2c2e 100%);
  /* Mozilla Firefox */ 
  background-image: -moz-linear-gradient(top, #0e448e 0%, #2b2c2e 100%);
  /* Opera */ 
  background-image: -o-linear-gradient(top, #0e448e 0%, #2b2c2e 100%);
  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #0e448e), color-stop(1, #2b2c2e));
  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-linear-gradient(top, #0e448e 0%, #2b2c2e 100%);
  /* W3C Markup, IE10 Release Preview */ 
  background-image: linear-gradient(to bottom, #0e448e 0%, #2b2c2e 100%);
  }
  #navContent {
  padding-top: 20px;
  }
  #mainNav #navContent ul {
  list-style: none;
  margin: 0 auto;
  padding: 0; 
  }
  #mainNav #navContent li {
  float: left; 
  }
  #mainNav #navContent li a {
  display: inline-block;
  padding: 8px 15px;
  text-decoration: none;
  font-weight: bold;
  color: #FFF;
  border-right: 1px solid #ccc;   
  }
  #mainNav #navContent li:first-child a {
  border-left: 1px solid #ccc; 
  }
  #mainNav #navContent li a:hover {
  color: #23afff;
  }
  #mainNav #navContent h1 {
  font-family: Verdana,Arial,Helvetica,sans-serif;
  font-size: 24px;
  margin-bottom: 2px;
  }
  .lvpLogo {
  margin: auto auto auto auto;
  display: inline-block;
  word-spacing: 20px;
  vertical-align: top;
  float: right;
  padding-right: 80px;
  }
  .lvpLogo strong {
  font-family: Verdana, Geneva, sans-serif;
  font-size: 36px;
  margin-bottom: 2px;
  }
  .navIcons {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 1px;
  height: 35px;
  width: 35px;
  }
  #subNav {
  overflow: hidden;
  height: 40px;
  width: 100%;
  margin: 0px;
  padding: 0px;
  color: #000000;
  /* IE10 Consumer Preview */ 
  background-image: -ms-linear-gradient(top, #FFFFFF 0%, #cccccc 100%);
  /* Mozilla Firefox */ 
  background-image: -moz-linear-gradient(top, #FFFFFF 0%, #cccccc 100%);
  /* Opera */ 
  background-image: -o-linear-gradient(top, #FFFFFF 0%, #cccccc 100%);
  /* Webkit (Safari/Chrome 10) */ 
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFFFFF), color-stop(1, #cccccc));
  /* Webkit (Chrome 11+) */ 
  background-image: -webkit-linear-gradient(top, #FFFFFF 0%, #cccccc 100%);
  /* W3C Markup, IE10 Release Preview */ 
  background-image: linear-gradient(to bottom, #FFFFFF 0%, #cccccc 100%);
  }
  .loginName {
  float: right;
  margin-right: 120px;
  color: #000000;
  font-weight: bold;
  line-height: 40px;
  margin-bottom: 2px;
  }
  #bodWrap {
  width: 100%;
  left: 0px;
  padding: 0px;
  color: #000000;
  }
  .statWrap {
  margin: 10px auto auto auto;
  border: 2px solid #000;
  border-radius: 19px;
  width: 80%;
  background-color: #eee;
  }
  .titleWrap {
  postion: absolute;
  background-color: #00639c;
  top: 0;
  height: 30px;
  border-radius: 30px;
  }
  .titleWrap span {
  color: #FFFFFF;
  font-weight: bold;
  margin: auto auto auto 33px;
  line-height: 30px;
  }
  </code></pre>
  
  <p>JSfiddle:
  <a href="http://jsfiddle.net/Artsen/tKdqh/" rel="nofollow">http://jsfiddle.net/Artsen/tKdqh/</a>
  Test Environment:
  <a href="http://lifeview.michiganweb.org/" rel="nofollow">http://lifeview.michiganweb.org/</a></p>