How to make a footer with text on both sides?

I've created a footer via the HTML.

I'd like for the "Made with love" text to be on the right side and not change to 2 lines whenever the window is made smaller.

footer {
  font-family: Raleway;
  padding-left: 1vw;
  padding-right: 1vw;
}

#copyright {
  text-align: left;
}

#madewith {
  text-align: right;
}

<footer>
  <p>
    <a id="copyright">© 2022 by Bella Pfister</a>
    <a id="madewith">Made with love</a>
  </p>
</footer>

Can someone explain how I go about aligning the "Made with" text to the right while keeping the copyright text to the left?

All you need to do is make #madewith float: right;. This will bring it to the right side of the footer.

footer {
  font-family: Raleway;
  padding-left: 1vw;
  padding-right: 1vw;
}

#copyright {
  text-align: left;
}

#madewith {
  text-align: right;
  float: right; /* this is where we add it */
}

<footer>
    <p>
        <a id="copyright">© 2022 by Bella Pfister</a>
        <a id="madewith">Made with love</a>
    </p>
</footer>

The easiest solution would be to use flexbox. You declare the footer as flex-container with footer { display: flex; }

Then you just add footer a:first-of-type { margin-right: auto; }. margin-right: auto inside a flex-container it will consume the entire remaining space and as such will push the remaining elements to the right.

/* original CSS */
footer {
  font-family: Raleway;
  padding-left: 1vw;
  padding-right: 1vw;
}


/* CSS changes */
footer {
  display: flex;
}

footer a:first-of-type {
  margin-right: auto;
}

<footer>
  <a id="copyright">© 2022 by Bella Pfister</a>
  <a id="madewith">Made with love</a>
</footer>

How to make a footer with text on both sides?

Related

Recent Posts