Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS CSS Layout Techniques Positioning Schemes Positioning Schemes Challenge

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

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

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

Thomas Fildes
Thomas Fildes
16,201 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

Thank you man. I passed it