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!
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
Tristan Johnson
Courses Plus Student 3,022 PointsContact Page not Two Column - The contact details floats to the right, but underneath the General information section.
See title. The contact details floats, but it floats to the right underneath the general info section. It does this regardless of the min-width of the window. Below is the code.
@media screen and (min-width: 480px) {
/******************************** TWO COLUMN LAYOUT *********************************/
#primary { width: 50% float: left; }
#secondary { width: 40%; float: right; }
}
@media screen and (min-width: 660px) {
}
Here is the HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tristan Johnson | Designer</title>
<link rel="stylesheet" href="css/normalize.css">
<link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,700italic,400,700,800' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/responsive.css">
</head>
<body>
<header>
<a href="index.html" id="logo">
<h1>Tristan Johnson</h1>
<h2>Designer</h2>
</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>I am not currently looking for new design work but I am available for speaking gigs and similar engagements. If you have any questions, Please don't hesitate to contact me.</p>
<p>Please only use phone contact for urgent inquiries. Otherwise, tweet or email me.</p>
</section>
<section id="secondary">
<h3>Contact Details</h3>
<ul class="contact-info">
<li class="phone"><a href="tel:555-6425">555-6425</a></li>
<li class="mail"><a href="mailto:tristan@example.com">tristan@example.com</a></li>
<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=tristangjohnson">@tristangjohnson</a></li>
</ul>
</section>
<footer>
<a href="http://google.com"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
<a href="http://yahoo.com"><img src="img/facebook-wrap.png" alt="Facebook Logo" class="social-icon"></a>
<p>© 2014 Tristan Johnson.</p>
</footer>
</div>
</body>
</html>
3 Answers
Liz Laffitte
23,691 PointsI'm having trouble loading workspaces to recreate your problem, but just looking at the code I think I have two ideas: you need a semicolon (;) after your primary column width declaration. As it, it won't respect the 50% width rule you have. Also try changing the float on your secondary column to left.
Tristan Johnson
Courses Plus Student 3,022 PointsDANGIT, I just saw the lack of a semicolon, I do that all the time!
Tristan Johnson
Courses Plus Student 3,022 PointsThat fixed it! Thanks!
Liz Laffitte
23,691 PointsNo problem! :) I'm glad you got it fixed.