Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

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
Zack Lee
Courses Plus Student 17,650 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.