title: DIV mysteriously being placed behind other DIVs?
body: <p>sorry for the probably dumb question...</p>
  
  <p>My footer div is being placed behind the divs recentWinnersContainer and recentWinnersMapContainer, even though it should be underneath them.</p>
  
  <p>Here is my jsFiddle and code.</p>
  
  <p><a href="http://jsfiddle.net/gjtd8tw7/" rel="nofollow">http://jsfiddle.net/gjtd8tw7/</a></p>
  
  <p>HTML</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  &lt;link rel="stylesheet" type="text/css" href="styles.css"&gt;
  &lt;link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div id="mainContainer"&gt;
  
    &lt;div id="navContainer"&gt;
      &lt;div id="logoImgContainer"&gt;
        &lt;img src="logo.png"&gt;
      &lt;/div&gt;
      &lt;p id="navLinks"&gt;Prizes Winners FAQ Contact Us&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div id="slideShowContainer"&gt;
      &lt;img src="slide1.jpg"&gt;
    &lt;/div&gt;
  
    &lt;div id="offersContainer"&gt;
      &lt;div class="offersArrowImg"&gt;
        &lt;img src="leftOffersArrow.jpg"&gt;
      &lt;/div&gt;
      &lt;div class="offerContainer"&gt;
        &lt;img class="offerImg" src="offer1.jpg"&gt;
        &lt;div class="offerBtn"&gt;Offer Name&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="offerContainer"&gt;
        &lt;img class="offerImg" src="offer2.jpg"&gt;
        &lt;div class="offerBtn"&gt;Offer Name&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="offerContainer"&gt;
        &lt;img class="offerImg" src="offer3.jpg"&gt;
        &lt;div class="offerBtn"&gt;Offer Name&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="offerContainer"&gt;
        &lt;img class="offerImg" src="offer4.jpg"&gt;
        &lt;div class="offerBtn"&gt;Offer Name&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="offersArrowImg"&gt;
        &lt;img src="rightOffersArrow.jpg"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="recentWinnersHeadlineContainer"&gt;
      &lt;p id="recentWinnersHeadline"&gt;Recent Winners&lt;/p&gt;
    &lt;/div&gt;
  
    &lt;div id="recentWinnersContainer"&gt;
      &lt;div class="recentWinnerContainer"&gt;
        &lt;div class="recentWinnerImg"&gt;&lt;img src="recentWinner3.jpg"&gt;&lt;/div&gt;
        &lt;p class="recentWinnerName"&gt;Firstname Lastname&lt;/p&gt; entered to win a &lt;p class="recentWinnerPrizeName"&gt;Prize Name&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="recentWinnerContainer"&gt;
        &lt;div class="recentWinnerImg"&gt;&lt;img src="recentWinner3.jpg"&gt;&lt;/div&gt;
        &lt;p class="recentWinnerName"&gt;Firstname Lastname&lt;/p&gt; entered to win a &lt;p class="recentWinnerPrizeName"&gt;Prize Name&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="recentWinnerContainer"&gt;
        &lt;div class="recentWinnerImg"&gt;&lt;img src="recentWinner3.jpg"&gt;&lt;/div&gt;
        &lt;p class="recentWinnerName"&gt;Firstname Lastname&lt;/p&gt; entered to win a &lt;p class="recentWinnerPrizeName"&gt;Prize Name&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="recentWinnerContainer"&gt;
        &lt;div class="recentWinnerImg"&gt;&lt;img src="recentWinner3.jpg"&gt;&lt;/div&gt;
        &lt;p class="recentWinnerName"&gt;Firstname Lastname&lt;/p&gt; entered to win a &lt;p class="recentWinnerPrizeName"&gt;Prize Name&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="recentWinnerContainer"&gt;
        &lt;div class="recentWinnerImg"&gt;&lt;img src="recentWinner3.jpg"&gt;&lt;/div&gt;
        &lt;p class="recentWinnerName"&gt;Firstname Lastname&lt;/p&gt; entered to win a &lt;p class="recentWinnerPrizeName"&gt;Prize Name&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="recentWinnersMapContainer"&gt;
      Map
    &lt;/div&gt;
  
    &lt;div id="footer"&gt;
      Footer
    &lt;/div&gt;
  
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>* {
  margin:0px;
  padding:0px;
  }
  
  #mainContainer {
  width:1000px;
  margin:0 auto 0 auto;
  }
  
  #navContainer {
  width:1000px;
  height:75px;
  background-color:#3299bb;
  }
  
  #logoImgContainer {
  float:left;
  margin:13px 0px 0px 20px;
  }
  
  #navLinks {
  float:right;
  margin: 15px 20px 0 0;
  font-family: 'Roboto Slab', serif;
  font-size:30px;
  color:#ffffff;
  }
  
  #slideShowContainer {
  width:1000px;
  height:380px;
  background-color:#000000;
  }
  
  #offersContainer {
  width:1000px;
  height:188px;
  background-color:blue;
  }
  
  .offerContainer {
  width:227px;
  height:188px;
  float:left;
  background-color:red;
  }
  
  #offerImg {
  width:227px;
  height:146px;
  }
  
  .offersArrowImg {
  float:left;
  }
  
  #recentWinnersHeadlineContainer {
  width:1000px;
  height:60px;
  background-color:#ff9900;
  }
  
  #recentWinnersContainer {
  width:495px;
  height:320px;
  float:left;
  margin-right:10px;
  background-color:yellow;
  }
  
  #recentWinnersHeadline {
  
  }
  
  .recentWinnerContainer {
  height:50px;
  }
  
  .recentWinnerImg {
  display:inline-block;
  }
  
  .recentWinnerName {
  display:inline-block;
  }
  
  .recentWinnerPrizeName {
  display:inline-block;
  }
  
  #recentWinnersMapContainer {
  width:495px;
  height:320px;
  float:left;
  background-color:green;
  }
  
  #footer {
  width:1000px;
  height:60px;
  background-color:grey;
  }
  </code></pre>