Qtsy Qtsy - 6 months ago 11
HTML Question

How to make a list float to the right in CSS?

I'm having a problem making my

.social-links
list float right.

This is what I want it to look like:
Image where social links float all the way to the right

This is what it actually looks like:
Image where social links are right next to nav links

What can I do take make my social links look like the previous image?

This is my HTML/CSS:



/* -----------------------------------------------------------------------*/
/* CSS Code */
/* -----------------------------------------------------------------------*/

.row {
max-width: 1140px;
margin: 0 auto;
}

.col {
display: block;
float: left;
margin: 1% 0 1% 1.6%;
}

.span_2_of_2 {
width: 100%;
}

.span_1_of_2 {
width: 49.2%;
}

footer {
background-color: #333;
font-size: 80%;
padding: 40px;
}

.footer-nav {
list-style: none;
float: left;
}

.social-links {
list-style: none;
float: right;
}


.footer-nav li,
.social-links li {
display: inline-block;
margin-right: 13px;
}

.footer-nav li:last-child,
.social-links li:last-child {
margin: 0;
}

.footer p {
color: #888;
text-align: center;
margin-top: 30px;
}

.footer-nav li a:link,
.footer-nav li a:visited,
.social-links li a:link,
.social-links li a:visited {
text-decoration: none;
border: 0;
color: #888;
transition: color 0.2s;
}

.footer-nav li a:hover,
.footer-nav li a:active {
color: #ddd;
}

.social-links li a:link,
.social-links li a:visited {
font-size: 130%;
}

.fa-youtube:hover {
color: #bb0000;

}

.fa-facebook:hover {
color: #365998;
}

.fa-twitter:hover {
color: #00aced;
}

.fa-google-plus:hover {
color: #dd4b39;
}

.fa-pinterest-p:hover {
color: #cb2027;
}

.fa-paypal:hover {
color: #10ad10;
}

.fa-youtube,
.fa-facebook,
.fa-twitter,
.fa-google-plus,
.fa-pinterest-p,
.fa-paypal,
.social-links i {
transition: color 0.2s;
}


.footer-copyright {
clear: both;
text-align: center;
}

<footer>
<div class="row">
<div class="col span-1-of-2">
<ul class="footer-nav">
<li><a href="#">Articles</a></li>
<li>&verbar;</li>
<li><a href="#">Resources</a></li>
<li>&verbar;</li>
<li><a href="#">Entertainment</a></li>
<li>&verbar;</li>
<li><a href="#">Misc</a></li>
<li>&verbar;</li>
<li><a href="#">About Me</a></li>
<li>&verbar;</li>
<li><a href="#">Site Map</a></li>
</ul>
</div>
<div class="col span-1-of-2">
<ul class="social-links">
<li><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-facebook" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-google-plus" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-pinterest-p" aria-hidden="true"></i></a></li>
<li><a href="#"><i class="fa fa-paypal" aria-hidden="true"></i></a></li>
</ul>
</div>
</div>
<div class="row">
<div class="footer-copyright">
<p>
Copyright &copy; 2010 - 2016 by Heather Ferris. &nbsp;&nbsp;&nbsp; All rights reserved.
</p>
</div>
</div>
</footer>




Answer

Looks to me like you've given both DIVs the same class, so they are both not really clearly defined for what you want to achieve.

Try adding an additional style class of

.right {
position: absolute;
right: 10%;

then changing the div wrapper for 'social links' to

<div class="col span-1-of-2 right">

It should help you out, leaving you to fine tune the rest