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

Posted by Sherry Morisch
Sherry Morisch
1,064 Points

Please Help - CSS Columns.

Hello Community!

I'm still working through the "Build Your Website" curriculum. I'm stuck on the portion where we are building columns in Responsive.Css and applying them to the Contact Page. My code looks right compared to what Nick is teaching but the columns aren't coming out.

Contact.html <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 questions, please connect with me.</p> <p>Please only use phone contact for urgent questions. Otherwise, twitter and e-mail are the most effective.</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:sherry@example.com">sherry@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=spotlightaround">@spotlightaround</a></li> </ul> </section>

Responsive.Css @media screen and (min-width: 480px) { /**************************************** Two Column Layout ******************************************/

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

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

} Any assistance is appreciated.

Thank you.

Sherry

Jesus Mendoza
Jesus Mendoza
23,289 Points

You have a typo on your #primary float. It's all lower case.

#primary { width: 50%; float: left; }
Matthew Reed
Matthew Reed
3,238 Points

You are also missing the opening section tag with the id primary.

<section class="row">
<div 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 questions, please connect with me.</p>
     <p>Please only use phone contact for urgent questions. Otherwise, twitter and e-mail are the most effective.</p>
  </div>
    <div 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:sherry@example.com">sherry@example.com</a></li>
        <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=spotlightaround">@spotlightaround</a></li> 
      </ul>
</div>
  </section>
Sage Elliott
Sage Elliott
30,003 Points

@matthew I updated your comment to fix the code posting. Was just missing one blank line before code. I do that pretty much every time I post a code snippet :)

6 Answers

Sherry Morisch
Sherry Morisch
1,064 Points
Sherry Morisch
Sherry Morisch
1,064 Points

Oh my gosh! Thank you everyone!!

Sherry Morisch
Sherry Morisch
1,064 Points
Sherry Morisch
Sherry Morisch
1,064 Points

It Still did Not Copy the First <section id="primary"> but it's there ;)

Matthew Reed
Matthew Reed
3,238 Points
Matthew Reed
Matthew Reed
3,238 Points

lol... Thanks Sage!

Sherry Morisch
Sherry Morisch
1,064 Points
Sherry Morisch
Sherry Morisch
1,064 Points

Oh.. I had the tag for the first <section id="primary"> but apparently it didn't make it into the paste. Thank you again. I'll try it right now :)

Sherry Morisch
Sherry Morisch
1,064 Points
Sherry Morisch
Sherry Morisch
1,064 Points

Well, I changed the "Float" to "float" already had the opening tag.. still doesn't result in the desired design change. I'll figure it out :) You're so very helpful and thank you :)

Matthew Reed
Matthew Reed
3,238 Points

@sherry I updated my code above please see the difference. I hope this is helpful.

Matthew Reed
Matthew Reed
3,238 Points

Also make sure that the section tag has the correct ID or class associated to that particular section.

Sherry Morisch
Sherry Morisch
1,064 Points
Sherry Morisch
Sherry Morisch
1,064 Points

This is the HTML as I have it: <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 questions, please connect with me.</p> <p>Please only use phone contact for urgent questions. Otherwise, twitter and e-mail are the most effective.</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:sherry@example.com">sherry@example.com</a></li> <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=spotlightaround">@spotlightaround</a></li> </ul> </section>

This is Responsive.CSS

@media screen and (min-width: 480px) { /**************************************** Two Column Layout ******************************************/

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

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