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

CSS Techniques: Positioning Schemes Question 5

Question states to set primary column's left offset to 0 and the secondary column's right offset to 0.

I'm getting the "Bummer!" message telling me that the primary column's left offset isn't set to 0. I'm not typing the letter "O" in place of the zero.

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;
}

5 Answers

Henry Moran
Henry Moran
10,516 Points

Kathryn: You need to remove the "-col" from the class names in the .css file: ie:

.primary {
  left: 0;
}
.secondary {
  right: 0;
}

Thanks, Henry. That worked! The HTML didn't have the hyphen in the classes (primary col & secondary col).

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher

Hi Kathryn Notson,

The hyphen isn't necessary in the selector – they're 2 separate classes. .col sets the absolute positioning scheme, while .primary and .secondary set the position offsets. Hope this helps. :)

Thanks for that clarification. I've been used to using the hyphenated classes in HTML (class="primary-col" & class="secondary-col" & then using them in CSS in class selectors (.primary-col & .secondary-col). That's what I was thinking when I initially answered the question incorrectly. That's why it stumped me. I'm making note of this.

Henry Moran
Henry Moran
10,516 Points

You might be missing the "px" after the 0. Try that.

Henry: Neither pixels (px) or percentage (%) work. Guil used only the value "0" (zero) in his offsets in his "Absolute Positioning" video. He didn't use "column-left" or "column-right", either. I reviewed the video before posting the question. The "Bummer!" message tells me to make sure the primary column's left offset is set to "0" (zero). It doesn't tell me to correct the collapsing issue by adding 100% height to the container element on this question, either.

Raúl Barrera C.
Raúl Barrera C.
18,943 Points

Hi Kathryn, in the HTML are missing dash (-) in class names: class="primary col" and in the css is: .primary-col. Maybe this is the error

Thanks. I think you're correct that the hyphen is missing in the HTML for the class ="primary col" & class="secondary col". That's part of the issue. However, I just dropped the "col" from my CSS class selectors .primary & .secondary to set the offsets to "0" and that worked.