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 CSS Layout Techniques Positioning Schemes Positioning Schemes Challenge

Jeffry Jimenez
Jeffry Jimenez
5,693 Points
Posted by Jeffry Jimenez
Jeffry Jimenez
5,693 Points

Question: Set the primary column's left offset to 0, and the secondary column's right offset to 0. >> What's wrong?

below my css code...

.content-row { position: relative; } .col{ position: absolute; } .primary col { left: 0; } .secondary col { right: 0; }

index.html 
<!DOCTYPE html>
<html>
<head>
    <title>Positioning</title>
    <link rel="stylesheet" href="page.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="main-wrapper">  
        <header class="main-header">
            <h1 class="main-logo"><a href="#">My Work</a></h1>
            <ul class="main-nav">
                <li><a href="#">Design</a></li>
                <li><a href="#">Coding</a></li>
                <li><a href="#">Writing</a></li>
                <li><a href="#">Hire Me!</a></li>
            </ul>
        </header>
        <div class="content-row">
            <div class="primary col">
                <h1>I'm a Designer</h1>
                <p>I design beautiful user interfaces, then bring them to life with HTML, CSS, and JavaScript. I love including personal photographs of nature, people and everyday things in my designs.</p>
                <p>If you need a front-end designer for your next project, <a href="#">take a look at my work</a>, then <a href="#">get in touch</a>!</p>
            </div>
            <div class="secondary col">
                <h2>I Also Write</h2>
                <p>I like teaching others about the latest web in technology. So when I'm not designing or coding websites &amp; apps, you'll find me writing <a href="#">articles for my blog</a>.</p>
            </div>
        </div>
    </div>
</body>
</html>
style.css 
/* Complete the challenge by writing CSS below */
.main-header {
  position: relative; 
 }
.main-logo,
.main-nav {
  position: absolute;
}
.main-logo {
  top: 25px;
  left: 25px;
}
.main-nav {
bottom: 30px;
right: 25px;
}
.content-row {
position: relative;
}
.col{
position: absolute;
}
.primary col {left: 0;}
.secondary col {right: 0;}

2 Answers

Jacob Mishkin
Jacob Mishkin
23,118 Points
Jacob Mishkin
Jacob Mishkin
23,118 Points

Hey dude, there are a couple of syntax errors but not that big of a deal. First col is not an element you forgot to turn them into a class. Second I think it's more the question than what you wrote, but you do not need to add the .col class, just .primary and . secondary classes. The code inside of the selectors are correct.

Two things to remember, First the code challenges are programs, they run like any other, so they are checking for a set that matches there conditionals. Second, details my friend, most errors are not with the code but rather semicolons typos and such. If you are not getting the desired results, first make sure there are no typos first.

Lastly, it maybe the formatting of Treehouse, or not but always keep the style of the code consistent. Example: 

.col{
position: absolute;
}
.primary col {left: 0;}
.secondary col {right: 0;}

Two things, One after your selector always have a space after the class selector and the curly brackets. Second, if you are writing your CSS using the style that you have for .col stick with that style. Never change styles. Its easier to read that way and you and any one else reading your code won't be confused. 

.col {
position: absolute;
}
.primary col {
left: 0;
}
.secondary col {
right: 0;
}
Jeffry Jimenez
Jeffry Jimenez
5,693 Points
Jeffry Jimenez
Jeffry Jimenez
5,693 Points

Your answer was useful, thank you. I also liked what you said about style. thumps up.!

Thomas Fildes
Thomas Fildes
22,687 Points
Thomas Fildes
Thomas Fildes
22,687 Points

Hi Jeffry,

The correct code to pass that part of the challenge is below:

.content-row {
  position: relative;
}

.col {
  position: absolute;
}

.primary {
  left: 0;
}

.secondary {
  right: 0;
}

Since the primary and secondary class selectors are descendants of the col class selector, you don't need to use col three times. Remember the DRY abbreviation (DON'T REPEAT YOURSELF).

Hope this helps! Happy Coding!!!

Jeffry Jimenez
Jeffry Jimenez
5,693 Points
Jeffry Jimenez
Jeffry Jimenez
5,693 Points

Thank you man. I passed it