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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Alex Thomas
Alex Thomas
4,247 Points

icons don't float right when creating two column layout.

I can get my contact info to float to the right but the icons are left behind and mix in with the column on the left. Can someone tell me what i'm doing wrong. I'll post code below...

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

/****************** TWO COLUMN LAYOUT ******************/

#primary { width: 50%; float: left; }

#seconday { width: 40%; float: right; }

}

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

}

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Alex Thomas | Designer</title> <link rel="stylesheet" href="css/normalize.css"> <link href="https://fonts.googleapis.com/css?family=Cinzel|Josefin+Sans|Yanone+Kaffeesatz" rel="stylesheet"> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> </head> <body> <header> <a href="index.html" id="logo"> <h1>Alex Thomas</h1> <h1>Designer</h1> </a> <nav> <ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul> </nav> </header> <div id="wrapper"> <section id="primary"> <h3>General Information</h3> <p>If you like what you see, feel free to contact me.</p>

    <p>Phone contact is most reliable</p>
  </section>
  <section id="secondary">
    <h3>Contact Details</h3>
    <ul class="contact-info">
      <li class="phone"><a href="tel:480-225-1436">480-225-1436</a>
    </li>
    <li class="mail"><a href="mailto:adt71@cox.net">adt71@cox.net</a>
    </li>
    <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=@RitualofAlex">@RitualofAlex</a></li>
    </ul>
    </section>

  <footer>
    <a href="https://twitter.com/RitualofAlex" target="_blank">
    <img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
   <a href="https://www.facebook.com/profile.php?id=100016307299483" target="_blank">
     <img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"> 
      </a>
    <p>&copy; 2017 Alex Thomas.</p>
  </footer>
    </div>

</body>

</html>

2 Answers

Timothy Schmidt
Timothy Schmidt
4,806 Points

In your css, you spelled secondary as seconday (you'r missing the r).

Alex Thomas
Alex Thomas
4,247 Points

I'm so stupid. Thanks a lot Timothy. DETAILS DETAILS DETAILS!

I did basically the same thing. Thanks to your comment, found the error quickly. Much appreciated!

Did the exact same thing. Glad there was an answer as long as I put the time into looking for it. Thanks Timothy Schmidt.