How to align text to the bottom right of my footer?

user_11529968 0
Viewed 109

How do I align my text "Created by Derrick Ogole Web Services" to the bottom right of my footer and still have "Copyright © 2022 Jessica Smith" still horizontally and vertically centred in the footer?

.footer-section {
  background-color: #000;
  height: auto;
  padding: 80px 0;
  color: #fff;
}

.copyright {
  text-align: center;
}

.copyright-creator {
  text-align: right;
  padding-right: 30px;
}
<section class="footer-section">

  <div class="copyright">
    <p class="copyright-jessica">Copyright &copy; 2022 Jessica Smith</p>
  </div>

  <div class="creator-container">
    <p class="copyright-creator">Created by Derrick Ogole Web Services</p>
  </div>

</section>

Here is my codepen: https://codepen.io/derrickogole/pen/GRQwqxZ

css html
9 Answers

You can add position: relative to the parent (.footer-section) and use absolute positioning to align .creator-container to bottom right.

.footer-section {
  background-color: #000;
  height: auto;
  padding: 80px 0;
  color: #fff;
  position: relative;
}

.copyright {
  text-align: center;
}

.creator-container{
  position: absolute;
  bottom: 0px;
  right: 5px;
}
<section class="footer-section">

  <div class="copyright">
    <p class="copyright-jessica">Copyright &copy; 2022 Jessica Smith</p>
  </div>

  <div class="creator-container">
    <p class="copyright-creator">Created by Derrick Ogole Web Services</p>
  </div>

</section>

user_92561890

You can use for example absolute positioning of the creator-container:

.footer-section {
  background-color: #000;
  height: auto;
  padding: 80px 0;
  color: #fff;
  position: relative;
}

.copyright {
  text-align: center;
}

.copyright-creator {
  position: absolute;
  bottom: 0;
  right: 0;
  padding-right: 30px;
}
<section class="footer-section">

  <div class="copyright">
    <p class="copyright-jessica">Copyright &copy; 2022 Jessica Smith</p>
  </div>

  <div class="creator-container">
    <p class="copyright-creator">Created by Derrick Ogole Web Services</p>
  </div>

</section>

user_26749370

Instead of setting your padding in the footer-section, set it in .copyright.

.footer-section {
  background-color: #000;
  color: #fff;
}

.copyright {
  text-align: center;
  padding: 80px 0;
}

.copyright-creator {
  text-align: right;
  padding-right: 30px;
}
<section class="footer-section">
  <div class="copyright">
    <p class="copyright-jessica">Copyright &copy; 2022 Jessica Smith</p>
  </div>

  <div class="creator-container">
    <p class="copyright-creator">Created by Derrick Ogole Web Services</p>
  </div>
</section>

EDIT

.copyright text will only be centered with itself but not with the whole footer.

I was looking to avoid the use of position:relative and position:absolute because if you add more content, you risk to make elements on top of each other.

.footer {
  background-color: #000;
  color: #fff;
  position: relative;
}

.content {
  text-align: center;
}

.absolute-content{
  background-color:orange;
  position: absolute;
  top: 10px;
  left: 10px;
}
<div class="footer">
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc placerat enim nulla, a volutpat leo bibendum at. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas accumsan magna ut nunc lobortis viverra. Phasellus in bibendum est. Vivamus tempor metus et mauris convallis tincidunt. Nam nunc odio, accumsan in urna id, vulputate molestie turpis. Nullam accumsan dolor non enim feugiat, at interdum turpis semper. Duis ut sapien at sem facilisis aliquet. Pellentesque molestie, lacus sed rutrum facilisis, justo dui pharetra lacus, ut tincidunt odio metus mollis mauris.</div>
  <div class="absolute-content">absolute</div>
</div>

user_176848090

Use position: absolute for both:

.footer-section {
  background-color: #000;
  position: relative;
  height: 100vh;
  color: #fff;
}

.copyright {
  position: absolute;
  top: 50%;
  left:50%;
  transform: translate(-50%, -50%);
}

.creator-container {
  position: absolute;
  bottom: 0;
  right: 0;
}
<section class="footer-section">

  <div class="copyright">
    <p class="copyright-jessica">Copyright &copy; 2022 Jessica Smith</p>
  </div>

  <div class="creator-container">
    <p class="copyright-creator">Created by Derrick Ogole Web Services</p>
  </div>

</section>

user_170071840

For example you could define your container as display: grid using 3 equally sized columns like this:

.footer-section {
  background-color: #000;
  height: auto;
  padding: 80px 0;
  color: #fff;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

.copyright {
  text-align: center;
}

.copyright-creator {
  text-align: right;
  padding-right: 30px;
}
<section class="footer-section">
    <div></div>
    <div class="copyright">
      <p class="copyright-jessica">Copyright &copy; 2022 Jessica Smith</p>
    </div>  
    <div class="creator-container">
      <p class="copyright-creator">Created by Derrick Ogole Web Services</p>
    </div>
</section>

user_12212080 

.footer-section {
position:relative;
  background-color: #000;
  height: auto;
  padding: 80px 0;
  color: #fff;
}

.copyright {
  text-align: center;
}

.creator-container{
  position: absolute;
  right: 10px;
  bottom: 0px;
}
        <section class="footer-section">

            <div class="copyright">
              <p class="copyright-jessica">Copyright &copy; 2022 Jessica Smith</p>
            </div>  

            <div class="creator-container">
              <p class="copyright-creator">Created by Derrick Ogole Web Services</p>
            </div>

        </section>

user_152587370

I don't think any of the other answers quite got it right. Take a look at the example below and let me know if this what you wanted

body { margin: 0 }
* { box-sizing: border-box }

.footer-section {
  background-color: #000;
  min-height: 200px;
  color: #fff;
  padding: 2rem;
  
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr;
}

.copyright, .creator {
  grid-column-start: 1;
  grid-column-end: 2;
  grid-row-start: 1;
}

.copyright {
  place-self: center;
}

.creator {
  place-self: end;
}
<section class="footer-section">
  <div class="copyright">Copyright &copy; 2022 Jessica Smith</div>
  <div class="creator">Created by Derrick Ogole Web Services</div>
</section>

user_192137250 

 .footer-section {
      background-color: #000;
      height: auto;
      padding: 80px 0;
      color: #fff;
    }

    .copyright {
      text-align: center;
    }

    .copyright-creator {
      position:relative;
      display:flex;
      flex-direction:row;
      justify-content:right;
      top:95px;
        
    }
    <section class="footer-section">

        <div class="copyright">
          <p class="copyright-jessica">Copyright &copy; 2022 Jessica Smith</p>
        </div>  

        <div class="creator-container">
          <p class="copyright-creator">Created by Derrick Ogole Web Services</p>
        </div>

    </section>

user_145629290

You can use a grid for the footer-section

.footer-section {
  background-color: #000;
  height: auto;
  padding: 80px 0;
  color: #fff;
  /* Added */
  display: grid;
}

.copyright {
  /* Added */
  place-self: center;
}

/* Added */
.creator-container {
  place-self: end;
}
<section class="footer-section">
  <div class="copyright">
    <p class="copyright-jessica">Copyright &copy; 2022 Jessica Smith</p>
  </div>
  <div class="creator-container">
    <p class="copyright-creator">Created by Derrick Ogole Web Services</p>
  </div>
</section>

user_31320190
Related