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

Posted by Malorie E Souser
Malorie E Souser
7,503 Points

Having trouble creating two columns on the contact page.

According to the video, there are supposed to be two distinct columns on the page. However, the primary section is just aligned to the right, and my secondary section is aligned to the left and both sections are still stacked on top of one another.

I'm using the latest version of Chrome.

Here 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) {

}

Thanks for your help in advance.

Sam Baines
Sam Baines
4,315 Points

Hi Malorie - we probably need you to post more of your code, using the markdown cheatsheet so we can see syntax highlighting, as the above looks like it should be correct - so there must be an error elsewhere I think. Or maybe a screenshot of what you are seeing in your browser.

Malorie E Souser
Malorie E Souser
7,503 Points

Thanks for your comment sam. I've edited my original entry to reflect the code so you can see the syntax. Hope this helps.

Jakob Wozniak
Jakob Wozniak
17,896 Points

What's happening when you bring the screen up to 480px? Your code looks good, assuming there are no spelling errors in your html.

Malorie E Souser
Malorie E Souser
7,503 Points

Thanks Jakob for your response. So, at 480px my contact screen is supposed to change to the two column layout, however what's happening is that the second column is aligning to the right but the text of the first column is not wrapping around it. (sorry there is no screenshot. I seem to be having difficulty posting the img)

2 Answers

Jakob Wozniak
Jakob Wozniak
17,896 Points

Hmm... I'd double check your ids on the contact page; perhaps the content for your first column isn't actually labeled id='primary'?

This would make sense, since you wouldn't notice a difference until you try to make the page responsive. I hope this helps!

Malorie E Souser
Malorie E Souser
7,503 Points
Malorie E Souser
Malorie E Souser
7,503 Points

Thanks Jakob. I tripple checked the code and can't seem to find the problem. I even switched my browser from firefox to chrome with no change. So, I'm just going to continue my studies and hopefully I'll discover the issue when I know more about CSS.

Thanks everyone for your assistance.