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

Markus Lienhard
Markus Lienhard
835 Points
Posted by Markus Lienhard
Markus Lienhard
835 Points

Build a Three Column Layout

Here is the code I wrote but I do not get 2 columns in the preview. Does anybody know why?

responsive.css

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

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

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

contact.html

<section id="primary">
        <h3>General Information</h3>
        <p>Ich bin 2014 wieder in meine Heimat Schweiz gezogen. Nach 10 jähriger Weltreise unterwegs als Art Director für Quiz Clothing U.K., baue ich mir meine eigene Firma in der Schweiz wieder auf. Momentan bin ich noch nicht voll ausgelastet. Benutzen Sie die Gelegenheit und kontaktieren Sie mich.</p>
        <p>Sie können mich persönlich von Montag bis Freitag zwischen 10 und 18 Uhr unter +41 (0)79 816 2072 erreichen.</p>
      </section>
      <section id="secondary">
        <h3>Contact Details</h3>
        <ul class="contact-info">
          <li class="phone"><a href="tel:+41-79-816-20-72">+41-79-816-20-72</a></li>
          <li class="mail"><a href="mailto:info@provo.ch">info@provo.ch</a></li>
          <li class="twitter"><a href"http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>

5 Answers

Melissa Wheeler
Melissa Wheeler
6,306 Points
Melissa Wheeler
Melissa Wheeler
6,306 Points

In the code you provided I am only seeing one section that you have given the id secondary. you have no section with the id primary so you will only have one column. 

<section id="primary">
        <h3>General info</h3>
        <p>General info about contacting me</p>
        <p>More info about contacting 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:nick@exmple.com">nick@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>

As you can see there are two sections. I also noticed an unrelated error with you li class twitter, your missing the equal sign after a href. Hope this helps

<li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
Markus Lienhard
Markus Lienhard
835 Points
Markus Lienhard
Markus Lienhard
835 Points

Hi Melissa, yes i do have both sections in my contact.html look:

  <section id="primary">
    <h3>General Information</h3>
    <p>Ich bin 2014 wieder in meine Heimat Schweiz gezogen. Nach 10 jähriger Weltreise unterwegs als Art Director für Quiz Clothing U.K., baue ich mir meine eigene Firma in der Schweiz wieder auf. Momentan bin ich noch nicht voll ausgelastet. Benutzen Sie die Gelegenheit und kontaktieren Sie mich.</p>
    <p>Sie können mich persönlich von Montag bis Freitag zwischen 10 und 18 Uhr unter +41 (0)79 816 2072 erreichen.</p>
  </section>
  <section id="secondary">
    <h3>Contact Details</h3>
    <ul class="contact-info">
      <li class="phone"><a href="tel:+41-79-816-20-72">+41-79-816-20-72</a></li>
      <li class="mail"><a href="mailto:info@provo.ch">info@provo.ch</a></li>
      <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
    </ul>
  </section>

However I replaced the section with your text and it still does not work, grrr..

Thanks for the tip with the equal sign by twitter

Iain Simmons
MOD
Iain Simmons
Treehouse Moderator 32,305 Points
Iain Simmons
Iain Simmons
Treehouse Moderator 32,305 Points

Is that your complete contact.html file? Because it would of course need to include a link tag that references your responsive.css file, something like this (with the path adjusted) between the head tags:

<link rel="stylesheet" type="text/css" href="css/responsive.css" />
Markus Lienhard
Markus Lienhard
835 Points
Markus Lienhard
Markus Lienhard
835 Points

Hi Iain

yes I did have that line but it was missing the type="text/css" I added that but it still does not work. Here again my entire contact.html page:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Markus Lienhard | Designer</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link href='http://fonts.googleapis.com/css?family=Changa+One|Open+Sans:400italic,600italic,700italic,400,700,600' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/main.css">
    <link rel="stylesheet" type="text/css" href="css/responsive.css">
    <meta name="viewpoint" content="width=device-width, initial-scale=1.0">
  </head>
  <body>
    <header>
      <a href="index.html" id="logo">
        <h1>Markus Lienhard</h1>
        <h2>Designer</h2>
      </a>
      <nav>
        <ul>
          <li><a href="index.html">Portfolio</a></li>
          <li><a href="about.html" class="selcted">About</a></li>
          <li><a href="contact.html" class="selcted">Contact</a></li>
        </ul>
      </nav>
    </header>
    <div id="wrapper">
      <section id="primary">
        <h3>General info</h3>
        <p>General info about contacting me</p>
        <p>More info about contacting 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:nick@exmple.com">nick@example.com</a></li>
          <li class="twitter"><a href="http://twitter.com/intent/tweet?screen_name=nickrp">@nickrp</a></li>
        </ul>
      </section>
      <footer>
        <a href="http://twitter.com/nickrp"><img src="img/twitter-wrap.png" alt="Twitter Logo" class="social-icon"></a>
        <a href="http://facebook.com/nickpettit"><img src="img/facebook-wrap.png" alt="Facebook Logo"class="social-icon"></a>
        <p>&copy; 2015 Markus Lienhard.</p>
      </footer>
    </div>  
  </body>
</html>
Melissa Wheeler
Melissa Wheeler
6,306 Points
Melissa Wheeler
Melissa Wheeler
6,306 Points

Do you have your css encapsulated in a media query?

@media screen and (min-width: 480px) {
/******************
TWO COLUMM LAYOUT
******************/
#primary {
  width: 50%;
  float: left;
  }

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

/******************
PAGE: PORTFOLIO
******************/
#gallery li {
  width: 28.3333%;
}

#gallery li:nth-child(4n) {
  clear: left;
}

/******************
PAGE: ABOUT
******************/

.profile-photo {
    float:left;
    margin:0 5% 80px 0;
  }  
}

If you do make sure it's closed at the very end, after your about page

Melissa Wheeler
Melissa Wheeler
6,306 Points

I'm just not seeing anything wrong with your code, so I hope this helps.

Markus Lienhard
Markus Lienhard
835 Points
Markus Lienhard
Markus Lienhard
835 Points

HI MELISSA

Thanks so much for your try. Yes I have a css encapsulated in a media query and closed it after about.

Thabita Michele Rosa
Thabita Michele Rosa
8,130 Points
Thabita Michele Rosa
Thabita Michele Rosa
8,130 Points

Hello, Markus.

I saw your contact page code and I noticed those lines:

<ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html" class="selcted">About</a></li> <li><a href="contact.html" class="selcted">Contact</a></li> </ul>

Did you try change it? Example:

<ul> <li><a href="index.html">Portfolio</a></li> <li><a href="about.html">About</a></li> <li><a href="contact.html" class="selected">Contact</a></li> </ul>