CODEWITHSUNDEEP
htmlcss
derrickogole
derrickogole

Reputation: 127

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

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

Upvotes: 1

Views: 1290

Answers (9)

C&#233;dric
C&#233;dric

Reputation: 2629

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>

Upvotes: 1

Jaswinder Kaur
Jaswinder Kaur

Reputation: 1634

.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>

Upvotes: 0

Dilki Lakshani
Dilki Lakshani

Reputation: 1

 .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>

Upvotes: 0

Arman Ebrahimi
Arman Ebrahimi

Reputation: 2297

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>

Upvotes: 0

Simp4Code
Simp4Code

Reputation: 1479

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>

Upvotes: 0

Gerard
Gerard

Reputation: 15786

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>

Upvotes: -1

TechySharnav
TechySharnav

Reputation: 5084

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>

Upvotes: 4

Diego D
Diego D

Reputation: 8150

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>

Upvotes: 0

Esko
Esko

Reputation: 4207

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>

Upvotes: 1

Related Questions