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

Posted by Kathryn Notson
Kathryn Notson
25,941 Points

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
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;
}
Kathryn Notson
Kathryn Notson
25,941 Points

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
Guil Hernandez
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. :)

Kathryn Notson
Kathryn Notson
25,941 Points

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
Henry Moran
Henry Moran
10,516 Points

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

Kathryn Notson
Kathryn Notson
25,941 Points
Kathryn Notson
Kathryn Notson
25,941 Points

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

Kathryn Notson
Kathryn Notson
25,941 Points

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.