Question 45029 in Html Question posted in
Some basic documentation can be found here.

How do I make an element stay at the bottom of the page no matter what? I want to have to scroll down to see the text when I decrease the window size – Html

I tried messing around with absolute and relative positioning, but I could not figure out how to keep the LinkedIn and Github link in the bottom left, while keeping the contact info in the bottom right.

<footer>
    <h2 style="text-align: left;">Links</h2>
    <ul style="text-align: left;">
        <li><a href="https://www.linkedin.com/in/akshay-subramaniam-404b76223/" target="_blank" title="LinkedIn">LinkedIn</a></li>
        <li><a href="https://github.com/akshaysub" target="_blank" title="GitHub">GitHub</a></li>
    </ul>

    <div>Contact Information:
        <address>
            <a href="mailto:[email protected]">[email protected]</a>
        <br>
            <a href="tel:+17034794766">(703)-479-4766</a>
        </address>
    </div>
</footer>


footer {
    position: relative;
}

footer div {
    position: absolute;
    text-align: left;
    bottom: 0;
    right: 0;
}
Tags:

2

Answers


  1. 0

    Try this out in your css it might help.

    footer {
  position: relative;
}

footer ul {
  position: absolute;
  text-align: left;
  bottom: 0;
  left: 0;
}

footer div {
  position: absolute;
  text-align: right;
  bottom: 0;
  right: 0;
}
    Login or Signup to reply.
  2. 0

    You can use flex instead of absolute position:

    HTML:

      <footer>
  <div class="links">
    <h2 style="text-align: left">Links</h2>
    <ul style="text-align: left">
      <li>
        <a
          href="https://www.linkedin.com/in/akshay-subramaniam-404b76223/"
          target="_blank"
          title="LinkedIn"
          >LinkedIn</a
        >
      </li>
      <li>
        <a href="https://github.com/akshaysub" target="_blank" title="GitHub"
          >GitHub</a
        >
      </li>
    </ul>
  </div>

  <div class="contact">
    Contact Information:
    <address>
      <a href="mailto:[email protected]">[email protected]</a>
      <br />
      <a href="tel:+17034794766">(703)-479-4766</a>
    </address>
  </div>
</footer>

    CSS:

      footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
  }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search