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

CSS

Kevin Wong
Kevin Wong
10,787 Points
Posted by Kevin Wong
Kevin Wong
10,787 Points

Layout for my contact page 2 column layout isn't right

I typed the media query for the contact page exactly like he did and added the IDs but the secondary isn't displaying next to it, instead it's displaying below the top first content.

3 Answers

Gabriel Plackey
Gabriel Plackey
11,064 Points
Gabriel Plackey
Gabriel Plackey
11,064 Points

You're primary section doesn't end before youre secondary section. So they are in the same section together. So they are both being floated to the left, then secondary is being floated to the right, inside of the primary section, but that also it only has a max-width of 40% or whatever you have it set to. So it's awkwardly in the middle like that. Here is the change you should make.

<section id="primary">
        <h3>General Information</h3>
        <p>I am not currently looking for new design work. If you have any questions, please don't hesitate to contact me!</p>
        <p>Please only use phone contact for urgent inquiries. Otherwise email is the best way to reach 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:kevin@example.com">kevin@example.com</a></li>
            <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=twitter">@twitter</a></li>
          </ul>
       </section>
Kevin Wong
Kevin Wong
10,787 Points
Kevin Wong
Kevin Wong
10,787 Points

Thank you :) I wouldn't have ever noticed that.

tomd
tomd
16,701 Points
tomd
tomd
16,701 Points

Gabriel beat me to it. Also, for debugging add a border around elements, I usually use:

border: 1px solid red;

It helps alot.