3

At the beginning everything is working fine. I have the middle element and the footer. And it is the way I want it. But when I resize the window, the footer gets behind the main element. Here is the code. How would I work about to make the footer stick (it is not a fixed positioning) at the bottom?

body{
  height: 100%;
  width: 100%;
}
.mainContent{
  width: 200px;
  height: 100px;
  border: 1px solid #222;
  margin-top: -50px;
  margin-left: -100px;
  position: absolute;
  top: 50%;
  left: 50%;
}
.footer{
  height: 20px;
  background: #444;
  position: absolute;
  bottom: 0;
  width: 100%;
  left: 0;
}

HTML

<html>
  <head></head>
  <body>
    <div class="mainContent"></div>
    <div class="footer"></div>
  </body>
</html>
dda
  • 6,030
  • 2
  • 25
  • 34
besabestin
  • 482
  • 8
  • 26

3 Answers3

0

I would suggest setting the Zindex of the footer to some really high value, and the main content to something around 1. This should fix your problems.

JosephGarrone
  • 4,081
  • 3
  • 38
  • 61
0
<style>
*{
margin:0px;
padding:0px;
}
.wrapper {
height:100%;
position:relative;
}

.mainContent{
width: 200px;
height: 100px;
border: 1px solid #222;
margin-top: -50px;
margin-left: -100px;
position: absolute;
top: 50%;
left: 50%;
}

.footer{
height: 20px;
background: #444;
position: absolute;
bottom: 0;
width: 100%;
left: 0;
}
</style>

<html>
<head>
</head> <body>
<div class="wrapper">
<div class="mainContent"></div>
<div class="footer"></div>
</div>

</body> </html>
IdemeNaHavaj
  • 2,297
  • 1
  • 12
  • 10
0

I'm not seeing the problem you're describing. For me the footer remains on top of everything else, at the bottom of the window. My guess is it is a browser issue or your description wasn't clear.

skzryzg
  • 1,020
  • 8
  • 25