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 Basics Positioning Page Content Positioning Elements Relative to Other Elements

Posted by Brianna Nash
Brianna Nash
4,933 Points

.tea not going to corner edges

Hey everyone, I'm following along with the video and using the workspace, but when I input:

.main-header { position: relative; } .tea { position: absolute; right: 0; bottom: 0; }

Instead of it putting the Tea element in the bottom right corner it's floating above the bottom of the Main Header container as if there were padding. BUT, the Ice Cream element is flush to the container. I've checked, double checked and triple checked and ONLY input what was mentioned in the video, but it's not changing anything.

Also, in the video before this one, when we used 6em and 50% it wasn't positioned like he mentioned either. It's like the Tea element isn't behaving the way he's saying it should.

Does anyone else have this issue or maybe can tell me what's going on?

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! The best way for us to help you would be if we could get a snapshot of your workspace. This will allow us to fork it and have a look around. I look forward to seeing the snapshot! :sparkles:

Brianna Nash
Brianna Nash
4,933 Points

Hi Jennifer!

I've taken a snapshot of it for you: https://w.trhou.se/0t1o8prdey

I hope that's right. I'm still new to all of this. Is there a way to include a picture at all? Not sure if what I'm seeing is a browser thing or not. But, for this particular area, the .tea element is on the right corner of Coffee.

Thanks so much!

Jennifer Nordell
seal-mask
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

You did great with the snapshot, and this is a very valuable thing to be able to do on this platform! I'm taking a look now :smiley:

Brianna Nash
Brianna Nash
4,933 Points

I appreciate the help :)

1 Answer

Jennifer Nordell
seal-mask
STAFF
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher
Jennifer Nordell
.a{fill-rule:evenodd;}techdegree
Jennifer Nordell
Treehouse Teacher

Hi there! I believe I've spotted it! It seems you got a semicolon where you wanted a colon. Take a look at your .tea selector. When I fork your workspace I see:

.tea {
  position: absolute;
  right: 0;
  bottom; 0;
}

But that should be:

.tea {
  position: absolute;
  right: 0;
  bottom: 0;
}

Note the "bottom" rule. In yours you've written bottom; 0;, but you meant to write bottom: 0;.

Hope this helps! :sparkles:

Brianna Nash
Brianna Nash
4,933 Points

(smacks forehead) apparently, I haven't had enough coffee to fuel my brain yet today.....

Thanks so much for checking it out!!