It is recommended to avoid using float for styling FooterTitle and FooterCaption. Remove the float:right; from the CSS.
Instead, you can apply text-align:right; to the <footer> element.
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 7%;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
text-align:right;
}
#FooterTitle {
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
For the remaining adjustments, such as the height property and ensuring all content appears correctly in the footer, I trust you can handle it. Personally, using a static height or adapting the height dynamically within media queries might be more effective than height: 7%;.
https://i.sstatic.net/SV2gV.png
Alternatively, you can modify the alignment to float right while aligning content to the left:
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
background-color: #414141;
font-family: Impact;
font-weight: normal;
font-size: 20px;
color: #ffffff;
}
#FooterTitle {
margin: 0.5%;
}
#FooterJapan {
color: #ff0000;
}
#FooterCaption {
font-size: x-small;
margin: 0.5%;
font-family: ubuntu-medium;
font-weight: normal;
}
#footer-right-content {
float: right;
text-align: left;
width: 100px;
}
HTML
<footer>
<div id="footer-right-content">
<p id="FooterTitle">Test <span id="FooterJapan">Test</span></p>
<p id="FooterCaption">Test</p>
</div>
</footer>
https://i.sstatic.net/jiT3Z.png