Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

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,052 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

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

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.