CODEWITHSUNDEEP
htmlcss
user5971386
user5971386

Reputation:

Footer not sticking to the bottom of the page (not fixed)

I am trying to have my footer at the bottom of the page - not fixed. The HTML layout is as follows:

<header><!-- content --></header>
<main>
    <div class="margin-center">
      <div class="individual">
          <section class="hours">
          </section>
      </div>
      <div class="stacked">
          <section class="blog">
          </section>
          <section class="pets-seen">
          </section>
      </div>
    </div>
</main>
<footer>
 <!-- footer content -->
</footer>

The following is my CSS:

footer {
  /* color */
  background-color: #334051;
  color: #fff;

  /* position and size */
  position: absolute;
  left: 0;
  width: 100%;
}

main {
  width: 100%;
  height 500px;
  margin-top: 250px;
  position: relative;
}

All aspects of the page are working and display fine except for the footer which displays over the rest of the content.

Upvotes: 0

Views: 34

Answers (1)

SourceOverflow
SourceOverflow

Reputation: 2048

Well that is what happens, when you use position: absolute. You can read up more here. Simply remove it and the standard (static) should work.

footer {
  /* color */
  background-color: #334051;
  color: #fff;

  /* position and size */
  width: 100%;
}

main {
  width: 100%;
  height 500px;
  margin-top: 250px;
  position: relative;
}
<header><!-- content --></header>
<main>
    <div class="margin-center">
      <div class="individual">
          <section class="hours">
          </section>
      </div>
      <div class="stacked">
          <section class="blog">
          </section>
          <section class="pets-seen">
          </section>
      </div>
    </div>
    <img src="https://www.placecage.com/1000/1000">
</main>
<footer>
 <!-- footer content -->
 This is the footer
</footer>

Upvotes: 1

Related Questions