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 trialAlex Thomas
4,247 Pointsicons 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>© 2017 Alex Thomas.</p>
</footer>
</div>
</body>
</html>
2 Answers
Timothy Schmidt
4,806 PointsIn your css, you spelled secondary
as seconday
(you'r missing the r).
jodylinder
Front End Web Development Techdegree Student 8,057 PointsThank you as well. I also did the exact same thing and this question and answer section allowed me to realise my error quickly.
Alex Thomas
4,247 PointsAlex Thomas
4,247 PointsI'm so stupid. Thanks a lot Timothy. DETAILS DETAILS DETAILS!
Seth Stephenson
8,050 PointsSeth Stephenson
8,050 PointsI did basically the same thing. Thanks to your comment, found the error quickly. Much appreciated!
Adam Overby
711 PointsAdam Overby
711 PointsDid the exact same thing. Glad there was an answer as long as I put the time into looking for it. Thanks Timothy Schmidt.