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

Question

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

Answer 1

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 © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>

Answer 2

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 © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>

Answer 3

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

Answer 4

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 © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>

Answer 5

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 © 2022 Jessica Smith</div>
<div class="creator">Created by Derrick Ogole Web Services</div>
</section>

Answer 6

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 © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>

Answer 7

.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 © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>

Answer 8

.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 © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>

Answer 9

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 © 2022 Jessica Smith</p>
</div>
<div class="creator-container">
<p class="copyright-creator">Created by Derrick Ogole Web Services</p>
</div>
</section>