Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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.