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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Craig Garrity
Craig Garrity
23,692 Points

Two columns not aligned on contact page

Hi all, i'm stuck on this page, my two columns are not positioned correctly on my contact page, the second column (right hand) sits to the right hand side, but below the first column in desktop view, not aligned alongside as per the video. I've looked through other posts on this matter but unable to find anything so far. I'm thinking it's a user error on my part somewhere and have looked at my code but unable to spot the error, I'm sure fresh and experienced eyes will help me out here!

My HTML with two sections "primary" and "secondary"

    <div id="wrapper">
    <section id="primary">
      <h3>General Information</h3>
      <p>I am currently available for new design projects</p>
      <p>Please use phone for urgent enquiries. Twitter and email are the best ways 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 class="mail"><a href="mailto:">email</a></li>
      <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=">twitter</a>
      </ul>
    </section> 

This is my CSS with two targeted IDs.

@media screen and (min-width: 480px) {

  /******************************
  TWO COLUMN LAYOUT
  *******************************/

  #primary {
    width: 50%;
  }

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

  /******************************
  PAGE: PORTFOLIO
  *******************************/

  #gallery li {
    width: 28.3333%;
  }

  #gallery li:nth-child(3n + 1) {
    clear: left;
  }

}

Many thanks for any help.

Craig Garrity
Craig Garrity
23,692 Points

Apologies, I just spotted this as soon as I posted the problem. I missed the float: left from #primary, I was convinced I had knocked something out on the HTML that I missed the glaringly obvious. Time for bed!

3 Answers

Just float the content in your columns to the left #primary { width: 50%; float:left; } #secondary { width: 40%; float:left; } or you can do this as well: #primary { width: 50%; float:left; } #secondary { width: 40%; float:right;
} If you are shooting for a 3 column layout, I would go with the first configuration. Note that when you are floating elements on a page, you need to clear them if you plan to have content that won't be in a column layout (like a footer for instance). You can do this by grouping your columns in an element like <div class = "container"> then using the following CSS:

.container:after { style:table; content:""; clear:both; } Hope this helps

I'm thinking you could also set the primary and secondary id's to display: inline-block; as well. That way they wouldn't take up a whole line by themselves and they would sit next to each other and you wouldn't have to float anything.

Craig Garrity
Craig Garrity
23,692 Points

Thanks guys for your advice and pointers, appreciated.