Search code examples
htmlcsslayoutcss-positionfooter

Footer overlapping content - HTML and CSS

The footer in my html code is overlapping previous content, this is how it looks like in the browser:

footer overlapping content

It's sitting on top of an image within the div just before the footer semantic tags.

    footer {
      position: relative;
    }
    
    #footerlinks {
      text-align: center;
    }
    
    #footerlinks li {
      list-style: none;
      display: inline-block;
    }
    
    #footerlinks a {
      text-decoration: none;
      color: #8e8e8e;
      font-family: 'Lato', sans-serif;
    }
          <!-- Reviews -->
      <section id="reviews">
        <h2>Reviews</h2>
        <section class="visitor-review-1">
          <h3>Placeholder text</h3>
        </section>
        <section class="visitor-review-2">
          <h3>Placeholder text<h3>
        </section>
      </section>

    </main>

    <!-- Footer -->
    <footer>
      <nav id="footerlinks">
        <ul>
          <li><a href="copyright.html">Copyright &#124;</a></li>
          <li><a href="accessibility.html"> Accessibility &#124;</a></li>
          <li><a href="subscribe.html"> Subscribe</a></li>
        </ul>
      </nav>
    </footer>

Solution

  • Just try to give a margin to footer from above division like <footer style="margin-top:90px"> else reduce the height of last closed division