Make an tag in a footer stick to the left and the other to the right

Question

I have two tags one links to the previous page and the other one to the next, and I have put both of them in the footer. In CSS, I can't get each tag to stick to its side of the footer without the other joining it.

The first thing I tried is setting "right" to 0 for "next" and "left" for "previous" but it didn't work. I tried "text-align" but that only put them in the center.

--!> HTML <--
<footer>
<a class="prev" onclick="location.href='#'">&#10094;</a>
  <a class="next" onclick="location.href='#'">&#10095;</a>
</footer>

/* CSS */


  /* Next and previous buttons */
.prev, .next {
  cursor: pointer;
  padding: 22px;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  user-select: none;
  
}

.prev:hover, .next:hover {
  background-color: white;
}

/* Footer */

 footer {
    background: rgba(0,136,169,1);
    color: #090e5e;
    font-size: 12px;
    padding: 20px 0px;
    overflow: hidden;
    bottom: 0;
    }

Always Helping · Accepted Answer · 2020-09-22T04:44:22.287

You can simply use flexbox like below to make sure <a> tag in footer stick to the left and the other to the right

Using flex is best way in modern browsers since its very responsive as well.

footer {
  background: rgba(0, 136, 169, 1);
  color: #090e5e;
  font-size: 12px;
  padding: 20px 0px;
  overflow: hidden;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}

Ideally i would rec-emend wrapping your <a> in a div so that styles are not applying to the whole footer but only the that div

<footer>
  <div class="arrow_buttons">
    <a class="prev" onclick="location.href='#'">&#10094;</a>
    <a class="next" onclick="location.href='#'">&#10095;</a>
  </div>
</footer>

Using CSS on that div - like this below:

.arrow_buttons {
    display: flex;
    justify-content: space-between;
 }

Live Working Demo:

/* Next and previous buttons */

.prev,
.next {
  cursor: pointer;
  padding: 22px;
  font-weight: bold;
  font-size: 30px;
  transition: 0.6s ease;
  user-select: none;
}

.prev:hover,
.next:hover {
  background-color: white;
}


/* Footer */

footer {
  background: rgba(0, 136, 169, 1);
  color: #090e5e;
  font-size: 12px;
  padding: 20px 0px;
  overflow: hidden;
  bottom: 0;
  display: flex;
  justify-content: space-between;
}

<footer>
  <a class="prev" onclick="location.href='#'">&#10094;</a>
  <a class="next" onclick="location.href='#'">&#10095;</a>
</footer>

Make an tag in a footer stick to the left and the other to the right

1 Answers1