CODEWITHSUNDEEP
htmlcssfooter
dwinnbrown
dwinnbrown

Reputation: 4029

CSS - Footer displayed in wrong position

I am trying to display a footer div at the bottom and inside of another div however when I use the following code, the black footer is displayed at the top of the div.

<div class="Background">
<div id="sitefooter">
<style>
#sitefooter {
position: relative;
bottom: 0px;
height: 130px;
background-color: black;
width: 100vw;
}
</style>
</div>
</div>

I have also tried to change the position of it with this:

position: absolute;
bottom: 0;

My CSS for the background is as follows:

.Background {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100vw;
    height: 100vh;
    background-image: url('resources/background.png');
    background-size: cover;
    background-position: center;
}

If anyone could help that would be great.

Thanks

Upvotes: 0

Views: 818

Answers (1)

codedude
codedude

Reputation: 6549

div.Background must have a position:relative style or a div with position: absolute inside it will not work. 

.Background {
  width:100%;
  height:200px;
  background:green;
  position:relative;
}
#sitefooter {
  position: absolute;
  bottom: 0px;
  height: 130px;
  background-color: black;
  width: 100%;
  color:#fff;
}
<div class="Background">This is the outer div, 
  <div id="sitefooter">This is the inner div.</div>
</div>

Upvotes: 2

Related Questions