CODEWITHSUNDEEP
htmlcss
Siggy
Siggy

Reputation: 39

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?

Upvotes: 1

Views: 1421

Answers (3)

Marc
Marc

Reputation: 11613

Try applying float to them, left and right accordingly. E.g., run the example here:

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

#copyright {
    text-align: left;
    width: 50%;
    float: left;
}

#madewith {
    text-align: right;
    width: 50%;
    float: right;
}
<footer>
        <p id="copyright">© 2022 by Bella Pfister</p>
        <p id="madewith">Made with love</p>
</footer>

Upvotes: 0

tacoshy
tacoshy

Reputation: 13001

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>

Upvotes: 1

IPSDSILVA
IPSDSILVA

Reputation: 1829

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>

Upvotes: 1

Related Questions