Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Andrew Gargano
.a{fill-rule:evenodd;}techdegree
Andrew Gargano
Front End Web Development Techdegree Student 6,603 Points

CSS - Float - Footer Elements

Hello,

I'm trying to float the footer-name class to the left of the screen and footer-home, footer-port and footer-contact right. But when I float right footer-home, port and contact the links flip in order. Can someone please tell me how to do this?

<footer> <ul class="footer-nav"> <li class="footer-name">Mike Test</li>
<li class="footer-back"><a href="#">BACK TO TOP</a></li> <li class="footer-home"><a href="#">Home</a></li> <li class="footer-port"><a href="#portfolio">Portfolio</a></li> <li class="footer-contact"><a href="#contact">Contact</a></li> </ul> </footer>

@media screen and (min-width: 1024px) {

}

.footer-home,
.footer-port,
.footer-contact {
    float: right;
    visibility: visible;
    padding: 0;

} 

.footer-name {
    float: left;
    padding-right: 50px;
}

}

1 Answer

Mohamed Nasser
Mohamed Nasser
5,316 Points

Try this

HTML :-

<footer> <h1 class="footer-name">Mike Test</h1> <a class="back-to-top" href="#">BACK TO TOP</a> <ul class="footer-nav"> <li class="footer-home"><a href="#">Home</a></li> <li class="footer-port"><a href="#portfolio">Portfolio</a></li> <li class="footer-contact"><a href="#contact">Contact</a></li> </ul> </footer>

CSS :-

@media screen and (min-width: 1024px) {

        footer::after{ /* this will solve the problem of footer collapsing because of the floats*/
            content: "";
            display: table;
            clear: both;
        }

        footer{
            background: grey; /* just for displaying the footer */
        }

        .footer-nav { /* to make the list float right*/
            float: right;
            visibility: visible;
            padding: 0;
        }

        .footer-nav li{ /* to style the list-items and display them horizontally */
            list-style: none;
            padding-left: 0;
            float: left;
            margin-right: 10px;
        }

        .footer-name,
        .back-to-top { /* to make footer-name and back to top link float left */
            float: left;
            padding-right: 50px;
            font-size: 1em;
        }

        .back-to-top{
            margin-top: 11px;
        }

        }