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
Posted by 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
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
Alex Thomas
Alex Thomas
4,247 Points

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

Seth Stephenson
Seth Stephenson
8,050 Points

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

Adam Overby
Adam Overby
711 Points

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