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


Tags: html,css,css-float

Problem :

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>



Solution :

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


    CSS Howto..

    How to position a set in Raphael SVG?

    How to remove extra space under paragraph in HTML/CSS

    Need the background to change when the mouse goes over the selected tab. How?

    How to using CSS to set content of column to top not center in JSF, primefaces?

    Smarty / How to include PHP function to compress CSS file

    CSS: how to style a div so that it has no effect

    How i can optimize Performance in asp.NET MVC based web application

    How to apply table css to this structure?

    How can I change opacity of an image in css without disturbing the overwritten text's opacity

    How to add nav icon images using max-width property in CSS

    How to make CSS fade out but the HTML to collapse

    How to animate my header to slide in horizontally from left to page view on load?

    Css styling without !important - how to do this?

    How to put css class in to html:select element in jsp

    How to add multiple CSS styles to an element with .css()

    How do I spilt the footer into different widths?

    How Can I Make The HTML Page More Narrow?

    How to make simple_form input field wider with CSS?

    how to css for data attribute [duplicate]

    How to select the second paragraph after another with css?

    How do I fit a fieldset to the size of its content with CSS?

    Third level drop down css wont show & content/links are out of order?

    How to change CSS element of data-pid using jquery

    Z-stacking CSS 3 Flex boxes : how to overlay DIVs that are flexbox items?

    How Can I Remove a Surrounding DIV with jQuery?

    How do I remove a specific bullet point within a ul in CSS?

    Element has greater px width than device viewport but still shows completely (mobile web app)

    How to create a Page Header (an Image) for print using css

    How to center items inside isotope container?

    How to style HTML compatible tags in XSL definition using extenal CSS?