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

Alison Pearce
Alison Pearce
7,440 Points
Posted by Alison Pearce
Alison Pearce
7,440 Points

Establish another relative positioning context in content-row, then set the position of col so that both columns are abs

Had no problem getting to this point of the challenge but now I am totally stumped. Not sure what to do?

Any help would be greatly appreciated!

Alison Pearce
Alison Pearce
7,440 Points
Alison Pearce
Alison Pearce
7,440 Points

Well I feel a little silly: if anyone else gets stuck, the key is to break the question down into two parts. First do the content-row part and then do the col part. I was trying to create one line of code that would target both :P

2 Answers

Rinat Shaikhutdinov
PLUS
Rinat Shaikhutdinov
Courses Plus Student 15,554 Points
Rinat Shaikhutdinov
Rinat Shaikhutdinov
Courses Plus Student 15,554 Points

Hello Alison. Try this solution:

/* 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; width: 30%; display: inline-block; margin-right: -5px; vertical-align: top; }

Ary de Oliveira
Ary de Oliveira
28,298 Points
Ary de Oliveira
Ary de Oliveira
28,298 Points

Challenge Task 4 of 6

Establish another relative positioning context in content-row, then set the position of col so that both columns are absolutely positioned inside the row.

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; width: 30%; display: inline-block; margin-right: -5px; vertical-align: top; }