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 Page Layout with the Float Property The Float Challenge Solution

Stefan Cutajar
Stefan Cutajar
7,747 Points

Teachers notes layout tips

Hi, I've managed to complete the challenge however can't really understand what the tips in the teachers notes below do, even Guill didnt use any of these in his method.

Column layout tips

1)To add a left gutter to all but the first column, you can use this:

.col + .col { padding-left: 1em; }

(I understand this adds 1em of padding to the left but why target .col twice?)

2)To remove the right gutter from the column closest to the right edge of the page, use :last-child

.col:last-child { padding-right: 0; }

(What does last-child do? does this suppose to clear any padding/margin at the right edge of the page ?)

(3)Bringing it all together This snippet floats all columns left and applies a right gutter. It applies a left gutter to all but the first column, so the first column will be flush with the left margin of the page. Then it removes the right gutter from last column, so that it's flush with the right margin of the page.

.col { float: left; padding-right: 1em; }

.col + .col { padding-left: 1em; }

.col:last-child { padding-right: 0; } (What does flush exactly mean?) Sorry for making a lot of questions but I wish to completely understand before I move on.

1 Answer

Zack Lee
PLUS
Zack Lee
Courses Plus Student 17,662 Points

So he's just giving tips on different ways you can use selectors.

so the first example he wants to add left margin to every .col EXCEPT the first .col so ".col + .col" uses the sibling selector (+) and targets all of the .col siblings of .col

:last-child is a pseudo-class selector. basically it targets the last child of a given parent. so ".col:last-child" targets the last last child element only and then he changes its padding.

finally, the word "flush" means aligned with, or up against the left margin of the the screen.