CODEWITHSUNDEEP
htmlcss
JohnWick
JohnWick

Reputation: 5149

DIV mysteriously being placed behind other DIVs?

sorry for the probably dumb question...

My footer div is being placed behind the divs recentWinnersContainer and recentWinnersMapContainer, even though it should be underneath them.

Here is my jsFiddle and code.

http://jsfiddle.net/gjtd8tw7/

HTML

<html>
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href='http://fonts.googleapis.com/css?family=Roboto+Slab' rel='stylesheet' type='text/css'>
</head>
<body>

<div id="mainContainer">

  <div id="navContainer">
    <div id="logoImgContainer">
      <img src="logo.png">
    </div>
    <p id="navLinks">Prizes Winners FAQ Contact Us</p>
  </div>

  <div id="slideShowContainer">
    <img src="slide1.jpg">
  </div>

  <div id="offersContainer">
    <div class="offersArrowImg">
      <img src="leftOffersArrow.jpg">
    </div>
    <div class="offerContainer">
      <img class="offerImg" src="offer1.jpg">
      <div class="offerBtn">Offer Name</div>
    </div>
    <div class="offerContainer">
      <img class="offerImg" src="offer2.jpg">
      <div class="offerBtn">Offer Name</div>
    </div>
    <div class="offerContainer">
      <img class="offerImg" src="offer3.jpg">
      <div class="offerBtn">Offer Name</div>
    </div>
    <div class="offerContainer">
      <img class="offerImg" src="offer4.jpg">
      <div class="offerBtn">Offer Name</div>
    </div>
    <div class="offersArrowImg">
      <img src="rightOffersArrow.jpg">
    </div>
  </div>

  <div id="recentWinnersHeadlineContainer">
    <p id="recentWinnersHeadline">Recent Winners</p>
  </div>

  <div id="recentWinnersContainer">
    <div class="recentWinnerContainer">
      <div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
      <p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
    </div>
    <div class="recentWinnerContainer">
      <div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
      <p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
    </div>
    <div class="recentWinnerContainer">
      <div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
      <p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
    </div>
    <div class="recentWinnerContainer">
      <div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
      <p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
    </div>
    <div class="recentWinnerContainer">
      <div class="recentWinnerImg"><img src="recentWinner3.jpg"></div>
      <p class="recentWinnerName">Firstname Lastname</p> entered to win a <p class="recentWinnerPrizeName">Prize Name</p>
    </div>
  </div>

  <div id="recentWinnersMapContainer">
    Map
  </div>

  <div id="footer">
    Footer
  </div>

</div>
</body>
</html>

CSS

* {
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;
}

Upvotes: 0

Views: 34

Answers (1)

CJR
CJR

Reputation: 3572

Change the #footer in your css file to this:

#footer {
    width:1000px;
    height:60px;
    background-color:grey;
    <!-- I ADDED THESE TWO LINES TO YOUR #FOOTER SELECTOR -->
    position: fixed;
    bottom: 0;
}

Upvotes: 1

Related Questions