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 Maya Liberman
.a{fill-rule:evenodd;}techdegree seal-36
Maya Liberman
Full Stack JavaScript Techdegree Graduate 26,360 Points

Why I can't get two columns on my about page?

Here is my about html:

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Nick Pettie | Designer </title> <link rel="stylesheet" href="css/normlize.css"> <link rel="stylesheet" href="css/normlize.css"> <link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700,800|Changa+One' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="css/main.css"> <link rel="stylesheet" href="css/responsive.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0">

</head>

<body> <header>

  <a href="index.html" id="logo">
  <h1> Nick Pettite</h1>
  <h2> Designer</h2>
    </a>
  <nav>
  <ul>
    <li> <a href="index.html"> Portfolio</a> </li>
    <li><a href="about.html" class="selected"> About</a></li>
    <li> <a href="contact.html">Contact</a></li>
    </ul>
   </nav>

</header>
<div id="wrapper">
  <section>
    <img src="img/nick.jpg" alt="photograph of Nick Pettite" class="profile-photo">

<h3> about </h3> <p>Hello, my name is Maya and this is my first website design in html.</p> <p>Using html is quite different from other web builders I worked on my user name is <a href="http://twitter.com/nickrp"> @nickrp</a>.</p>

</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="Facbook logo"class="social-icon"></a>

<p> &copy; 2014 Nick Pettit.</p>

</footer> </div> </body> </html> <style>

Here is my responsive css file:

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

/******** TWO COLOMN 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; }

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

/****** HEADER ******/

nav { background: none; float: right; font-size: 1.125em; text-align: right; width: 45%

}

logo {

float: left; margin-left: 5%; text-align: left; width: 45%;

}

h1 {

font-size: 2.5em;

}

h2 { font-size: 0.825em; margin-bottom: 20px; }

header { border-bottom: 5px solid #599a68; margin-bottom: 60px;

} }

1 Answer

David Jarrin
PLUS
David Jarrin
Courses Plus Student 11,182 Points
David Jarrin
David Jarrin
Courses Plus Student 11,182 Points

Ok, I'm not exactly sure what you are trying to split into two columns but here is an example (first time using workspace snapshots so forgive me if this doesn't work, just click on the link).

https://w.trhou.se/j5n3vg5rkh

I see you may just be starting out so this is a good start, once you get your sea legs I recommend trying out the bootstrap grid system for super cool, relatively easy responsive columns.