How do I get two elements in a <p> tag to align on the right side?

Question

I'm trying to format the footer of my app, and there are 3 things I want along the footer, all hyperlinks that I'd like on the same line.

        <p><a href="mailto:me@myemail.com">&copy; 2017 - My Name, Section 4</a>
        <a asp-area="" asp-controller="Home" asp-action="About">About</a>
        <a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></p>

I'd like the About and Contact hyperlinks to align on the right side of the footer, like this.

But the code I wrote produces this:

I tried float and text-align but I may have done it incorrectly.

Answer 1

I would recommend a different approach for the markup.

Use an <ul> (unordered list) inside a <footer> tag. Then, use <li> (list items) for each <a> anchor tag. This will be better for semantics and accessibility.

After having a proper HTML markup, you can proceed to style it with any method you like:

Flexbox (recommended):

/* Unordered list */

.footer {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: flex;
}


/* List item */

.footer__item {
  padding: 0 .5em;
}


/* Select the second item from last to first in case you add more items */

.footer__item:nth-last-child(2) {
  margin-left: auto;
}

<footer>
  <ul class="footer">
    <li class="footer__item">
      <a href="mailto:me@myemail.com">&copy; 2017 - My Name, Section 4</a>
    </li>
    <li class="footer__item">
      <a asp-area="" asp-controller="Home" asp-action="About">About</a>
    </li>
    <li class="footer__item">
      <a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a>
    </li>
  </ul>
</footer>

CSS Grid:

/* Unordered list */

.footer {
  padding: 0;
  margin: 0;
  list-style-type: none;
  display: grid;
  grid-gap: 0 .5em;
  grid-template-columns: repeat(3, auto);
}


/* Select the second item from last to first */

.footer__item:nth-last-child(2) {
  margin-left: auto;
}

<footer>
  <ul class="footer">
    <li class="footer__item">
      <a href="mailto:me@myemail.com">&copy; 2017 - My Name, Section 4</a>
    </li>
    <li class="footer__item">
      <a asp-area="" asp-controller="Home" asp-action="About">About</a>
    </li>
    <li class="footer__item">
      <a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a>
    </li>
  </ul>
</footer>

Floats:

/* Unordered lists */

.footer,
.footer__section {
  padding: 0;
  margin: 0;
  list-style-type: none;
}


/* List item */

.footer__item {
  float: left;
  padding: 0 .5em;
}


/* Nested unordered list */

.footer__section {
  float: right;
}

<footer>
  <ul class="footer">
    <li class="footer__item">
      <a href="mailto:me@myemail.com">&copy; 2017 - My Name, Section 4</a>
    </li>
    <!-- Requires extra markup -->
    <ul class="footer__section">
      <li class="footer__item">
        <a asp-area="" asp-controller="Home" asp-action="About">About</a>
      </li>
      <li class="footer__item">
        <a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a>
      </li>
    </ul>
  </ul>
</footer>

Answer 2

Flexbox can do that:

p {
  display: flex;
}

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

<p><a href="mailto:me@myemail.com">&copy; 2017 - My Name, Section 4</a>
  <a asp-area="" asp-controller="Home" asp-action="About">About</a>
  <a asp-area="" asp-controller="Home" asp-action="Contact">Contact</a></p>

Answer 3

Just add a class and float it right with some padding:

https://jsfiddle.net/cx5m40wu/

<p><a href="mailto:me@myemail.com">&copy; 2017 - My Name, Section 4</a>
                <a asp-area="" asp-controller="Home" asp-action="Contact" class="alignRight">Contact</a>
                <a asp-area="" asp-controller="Home" asp-action="About" class="alignRight">About</a></p>

.alignRight{
  float: right;
  padding-left: 15px;
}