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 trialKathryn Notson
25,941 PointsCSS 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.
<!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 & apps, you'll find me writing <a href="#">articles for my blog</a>.</p>
</div>
</div>
</div>
</body>
</html>
/* 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
10,516 PointsKathryn: You need to remove the "-col" from the class names in the .css file: ie:
.primary {
left: 0;
}
.secondary {
right: 0;
}
Guil Hernandez
Treehouse TeacherHi 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
25,941 PointsThanks 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
10,516 PointsYou might be missing the "px" after the 0. Try that.
Kathryn Notson
25,941 PointsHenry: 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.
18,943 PointsHi 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
25,941 PointsThanks. 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.
Kathryn Notson
25,941 PointsKathryn Notson
25,941 PointsThanks, Henry. That worked! The HTML didn't have the hyphen in the classes (primary col & secondary col).