Qtsy Qtsy - 6 months ago 12
CSS Question

Float property not working correctly

I'm having a problem making my .social-links 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

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>





I'm still learning, so I'm probably missing something simple. Any help is greatly appreciated!

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