0

I am working on a project so I only uploaded a snippet page, but since I have my footer on all pages it is not aligning correctly. My footer is overlapping with the other information in the body. I have made the footer with a position absolute and I also tried making the wrapper div a position relative but nothing changed.

Expand the snippet for more.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<style>
  .sorting {
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    flex: 0 0 50%;
    margin: 0 auto;
    margin-top: 25px;
    width: 25%;
  }
  .sort {
    width: 100% !important;
  }
  .btn-dark {
    border-radius: 0;
  }
  .container {
    width: 100% !important;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    justify-items: center;
  }

  a {
      text-decoration: none;
      color: black;
  }

  footer {
        position:absolute;
        bottom:0;
      text-align:center;
      width: 100%;
      padding: 40px 0px;
      background-color: #e4e4e4;
  }

</style>
</head>
<body>

<div class="wrapper">
    <div class="sorting dropdown">
      <button class="btn btn-dark dropdown-toggle" type="button" id="sortbyMenu_orders" data-bs-toggle="dropdown" aria-expanded="false">
        Sort By:
      </button>
      <ul class="sort dropdown-menu" aria-labelledby="sortbyMenu_orders">
        <li><a class="all-orders dropdown-item" href="#">All Orders</a></li>
        <li><a class="incom-orders dropdown-item" href="#">Incomplete Orders</a></li>
        <li><a class="com-orders dropdown-item" href="#">Completed Orders</a></li>
        <li><a class="ref-orders dropdown-item" href="#">Refunded/Cancelled</a></li>
      </ul>
    </div>

    <section>   
        <table class="table table-striped mt-5 mb-5">
            <thead>
                <th>Created</th>
                <th>Order #</th>
                <th>Email</th>
                <th>Order Status</th>
                <th>Receipt</th>
                <th></th>
                <th>Actions</th>
                <th></th>
            </thead>
            <tbody class="orderNum-admin">
            <tr>
                <td>Order details</td>
                <td>Order details</td>
            </tr>
            <tr>
                <td>Order details</td>
                <td>Order details</td>
            </tr>
            <tr>
                <td>Order details</td>
                <td>Order details</td>
            </tr>
            <tr>
                <td>Order details</td>
                <td>Order details</td>
            </tr>
            <tr>
                <td>Order details</td>
                <td>Order details</td>
            </tr>
            <tr>
                <td>Order details</td>
                <td>Order details</td>
            </tr>
            <tr>
                <td>Order details</td>
                <td>Order details</td>
            </tr>
            <tr>
                <td>Order details</td>
                <td>Order details</td>
            </tr>
            <tr>
                <td>Order details</td>
                <td>Order details</td>
            </tr>
            <tr>
                <td>Order details</td>
                <td>Order details</td>
            </tr>
            <tr>
                <td>Order details</td>
                <td>Order details</td>
            </tr>
            <tr>
                <td>Order details</td>
                <td>Order details</td>
            </tr>
            <tr>
                <td>Order details</td>
                <td>Order details</td>
            </tr>
            </tbody>
        </table>
    </section>

    <footer>
        <p>Information here</p>
    </footer>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
</body>
</html>

Here is something else I also tried. Removing the footers position:absolute, the footer would stay at the bottom, but when the page is empty it floats in the middle of the entire page or if there isnt enough content.

not enough content

EDIT: The question posted above does not answer my question at all. This is for a footer, not for a header. There must be something inside of my footer or wrapper that I am doing incorrectly. Placing position:fixed; did not also solve it. And all of my elements are inside of a div. So I'm quite unsure what the problem could be. If anyone else could help me understand this more. I am sure there are multiple ways of getting the footer to stay without overlapping or dependent upon content of the body. My problem is that the footer without absolute will only stay at the bottom if there is content. With the footer, the footer just stays on top of the other elements.

Here are some resources I looked into: https://dev.to/nehalahmadkhan/how-to-make-footer-stick-to-bottom-of-web-page-3i14

https://www.w3schools.com/howto/howto_css_fixed_footer.asp

So I am looking for what could be causing my footer to not stay.

Mergo22
  • 69
  • 1
  • 6

0 Answers0