title: Bottom div is overlapping the top
body: <p>I am running into a bit of trouble trying to get the mid section content div to appear under the top div. What I mean is that the bottom div is overlapping and appearing underneath, or on the bottom of, the top div. </p>
  
  <p>Here are two images and the code to give you a better idea of what I am trying to write:</p>
  
  <p>Here is what it looks like in browser:
  <img src="https://i.stack.imgur.com/u1Qsv.jpg" alt="enter image description here"></p>
  
  <p>Here is what it should look like:
  <img src="https://i.stack.imgur.com/wFJC9.jpg" alt="enter image description here"></p>
  
  <p>Here is the HTML:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Untitled Document&lt;/title&gt;
  &lt;link href="style/style.css" rel="stylesheet" type="text/css"&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="topBar"&gt;
      &lt;div id="wrapper"&gt;
          &lt;!--top left phone number and icon start--&gt;
         &lt;div id="leftTop"&gt;
              &lt;div id="facebookTop"&gt;
              &lt;a href="#"&gt;
              &lt;img src="images/facebook-icon.png" alt="GreatOrlandoDiscounts Become our friend on Facebook!" /&gt;
              &lt;/a&gt;
              &lt;/div&gt;
              &lt;p class="topLeftNumber"&gt;Call us at: &lt;mark class="orange"&gt;1-800-544-7646&lt;/mark&gt;&lt;/p&gt;
          &lt;/div&gt;
          &lt;!--top left phone number and icon end--&gt;
                  &lt;!--top right phone number and icon start--&gt;
                  &lt;div id="rightTop"&gt;
                  &lt;div id="twitterTop"&gt;
                  &lt;img src="images/twitter-icon.png" alt="GreatOrlandoDiscounts Follow us on Twitter" /&gt;
                  &lt;/div&gt;
                  &lt;p class="topRightNumber"&gt;Call us at: &lt;mark class="orange"&gt;1-800-544-7646&lt;/mark&gt;&lt;/p&gt;
                  &lt;/div&gt; 
                  &lt;!--top left phone number and icon end--&gt;
                      &lt;!--Left nav bar start--&gt;
                      &lt;div id="leftNavBar"&gt;
                          &lt;!--left nav dropdown start--&gt;
                          &lt;div id="navBarLeft"&gt;
                          &lt;div id="dropdownContainerLeft"&gt;
                          &lt;div id="menuLeft"&gt;
                          &lt;ul&gt;
                          &lt;li class="home"&gt;&lt;a href="http://www.ticketmomma.com"&gt;HOME&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/orlando-attractions.html"&gt;THEME PARKS&lt;/a&gt;
                          &lt;ul&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/walt-disney-world.htm"&gt;Disney&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/universal-orlando.htm"&gt;Universal Studios&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/sea-world-orlando.htm"&gt;SeaWorld&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/busch-gardens-tickets.htm"&gt;Busch Gardens&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/dinner-shows.html"&gt;Dinner Shows&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/orlando-attractions.html"&gt;WATER PARKS&lt;/a&gt;
                          &lt;ul&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/walt-disney-world.htm"&gt;Disney&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/universal-orlando.htm"&gt;Universal Studios&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/sea-world-orlando.htm"&gt;SeaWorld&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/busch-gardens-tickets.htm"&gt;Busch Gardens&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/dinner-shows.html"&gt;Dinner Shows&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!--left nav dropdown end--&gt;
                      &lt;/div&gt;
                      &lt;!--Left nav bar end--&gt;
                      &lt;!--Right nav bar start--&gt;
                      &lt;div id="rightNavBar"&gt;
                      &lt;!--Right nav dropdown start--&gt;
                          &lt;div id="navBarRight"&gt;
                          &lt;div id="dropdownContainerRight"&gt;
                          &lt;div id="menuRight"&gt;
                          &lt;ul&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/orlando-attractions.html"&gt;DINNER SHOWS&lt;/a&gt;
                          &lt;ul&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/walt-disney-world.htm"&gt;Disney&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/universal-orlando.htm"&gt;Universal Studios&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/sea-world-orlando.htm"&gt;SeaWorld&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/busch-gardens-tickets.htm"&gt;Busch Gardens&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/dinner-shows.html"&gt;Dinner Shows&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/orlando-attractions.html"&gt;ATTRACTIONS&lt;/a&gt;
                          &lt;ul&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/walt-disney-world.htm"&gt;Disney&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/universal-orlando.htm"&gt;Universal Studios&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/sea-world-orlando.htm"&gt;SeaWorld&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/busch-gardens-tickets.htm"&gt;Busch Gardens&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/dinner-shows.html"&gt;Dinner Shows&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/orlando-attractions.html"&gt;SERVICES&lt;/a&gt;
                          &lt;ul&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/walt-disney-world.htm"&gt;Disney&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/universal-orlando.htm"&gt;Universal Studios&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/sea-world-orlando.htm"&gt;SeaWorld&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/busch-gardens-tickets.htm"&gt;Busch Gardens&lt;/a&gt;&lt;/li&gt;
                          &lt;li class="attractions"&gt;&lt;a href="http://www.ticketmomma.com/dinner-shows.html"&gt;Dinner Shows&lt;/a&gt;&lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;/li&gt;
                          &lt;/ul&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;!--Right nav dropdown end--&gt;
                      &lt;/div&gt;
                      &lt;!--Right nav bar end--&gt;
                          &lt;!--Main image start - ONLY CHANGE IMAGE IN INLINE CODE--&gt;
                           &lt;div id="mainImage"&gt;
                           &lt;img class="main" src="images/main-image.jpg"  alt="Discount Walt Disney World Tickets" /&gt;
                           &lt;/div&gt;
                           &lt;!--Main image end--&gt;
                                  &lt;!--Logo start--&gt;
                                  &lt;div id="logo"&gt;
                                  &lt;a href="http://www.greatorlandodiscounts.com"&gt;
                                  &lt;img src="images/logo.png" alt="Great Orlando Discount Tickets" /&gt;
                                  &lt;/a&gt;
                                  &lt;/div&gt;  
                                  &lt;!--Logo end--&gt; 
        &lt;/div&gt;
  &lt;/div&gt; 
  &lt;!--Middle section start--&gt;
          &lt;div id="midSecWrapper"&gt;
              &lt;!--midSpacer start--&gt;
              &lt;div id="midSpacer"&gt;&lt;/div&gt;
              &lt;!--midSpacer end--&gt;
          &lt;/div&gt;
  &lt;!--Middle section end--&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here is my CSS:</p>
  
  <pre><code>@charset "utf-8";
  /* CSS Document */
  
  body {
      margin: 0 auto;
      background-image:url(../images/body-bg.jpg);
      background-repeat:repeat;
  }
  
  #topBar {
      width: 100%;
      height: 58px;
      background-image:url(../images/top-bar.png);
      background-repeat:repeat-x;
      position: relative;
      z-index:0;  
  }
  
  #wrapper {
      width: 980px;
      height: 501px;
      position:relative;
      z-index:100;
      margin: 0 auto;
  }
  
  #logo {
      width: 260px;
      height: 185px;
      position:relative;
      z-index:999;
      margin: 0 auto;
  }
  
  #leftTop {
      width: 350px;
      height: 58px;
      float: left;
      z-index:200;
  }
  
  #rightTop {
      width: 360px;
      height: 58px;
      float: right;
      z-index:300;
  }
  
  #mainImage {
      width: 980px;
      height: 401px;
      float: left;
      clear: left;
      position: absolute;
      z-index: -100;
      margin-top: 100px;
      left: 0px;
      top: -2px;
  }
  
  #facebookTop {
      float:left;
      margin: 4px 10px 0px 0px;
  }
  
  #twitterTop {
      float:right;
      margin: 4px 0px 0px 10px;
  }
  
  #leftNavBar {
      width: 340px;
      height: 40px;
      float: left;
      clear: both;
      z-index:600;
  }
  
  #rightNavBar {
      width: 360px;
      height: 40px;
      float: right;
      clear: right;
      z-index:700;
  }
  
  #midSecWrapper {
      margin: 0 auto;
      width: 980px;
      height: 501px;
  }
  
  #midSpacer {
      width: 980px;
      height: 30px;
      background-image:url(../images/spacer.png);
      background-repeat:repeat-x;
  }
  
  .topLeftNumber {
      font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
      font-size: 18px;
      font-weight:bold;
      color: #e1ebf4;
      margin-top: 15px;
  }
  
  .topRightNumber {
      font-family:"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", "DejaVu Sans", Verdana, sans-serif;
      font-size: 18px;
      font-weight:bold;
      color: #e1ebf4;
      margin-top: 15px;
      text-align:right;
  }
  
  mark.orange {
      color:#fa7252;
      background: none;
  }
  
  .twitterTop {
  }
  
  /*Nav bar style left*/
  #menuLeft {
      padding: 5px 0px 0px 0px;
      margin:0;
  }
  #menuLeft ul{
      padding:0;
      margin:0;
  }
  #menuLeft li{
      position: relative;
      float: left;
      list-style: none;
      margin: 0;
      padding:0;
  }
  #menuLeft li a{
      font-size: 12px;
      width:110px;
      height: 30px;
      display: block;
      text-decoration:none;
      text-align: center;
      line-height: 30px;
      font-family: Arial, Helvetica, sans-serif;
      text-shadow: 1px 1px 2px #9d9d9d;
      color: #454f54;
  }
  
  #menuLeft li a:hover{ 
      background-image: url(../images/nav-hover-bg.jpg); 
      color: #fa7252; background-color: #e1ebf4;
  }
  
  #menuLeft ul ul{ 
      position: absolute; 
      top: 30px; 
      visibility: hidden; 
      background-color: #e1ebf4; 
      color: #22293c;
  }
  
  #menuLeft ul li:hover ul{ 
      visibility:visible; 
      color: #22293c; 
  }
  /*Nav Bar Style left end*/
  
  /*Nav bar style right*/
  #menuRight {
      padding: 5px 0px 0px 0px;
      margin:0;
  }
  #menuRight ul{
      padding:0;
      margin:0;
  }
  #menuRight li{
      position: relative;
      float: left;
      list-style: none;
      margin: 0;
      padding:0;
  }
  #menuRight li a{
      font-size: 12px;
      width:120px;
      height: 30px;
      display: block;
      text-decoration:none;
      text-align: center;
      line-height: 30px;
      font-family: Arial, Helvetica, sans-serif;
      text-shadow: 1px 1px 2px #9d9d9d;
      color: #454f54;
  }
  
  #menuRight li a:hover{ 
      background-image: url(../images/nav-hover-bg.jpg); 
      color: #fff; background-color: #e1ebf4;
  }
  
  #menuRight ul ul{ 
      position: absolute; 
      top: 30px; 
      visibility: hidden; 
      background-color: #e1ebf4; 
      color: #22293c;
  }
  
  #menuRight ul li:hover ul{ 
      visibility:visible; 
      color: #22293c; 
  }
  /*Nav Bar Style right end*/
  </code></pre>