CSS CSS Layout Basics Page Layout with the Float Property The Float Challenge Solution

Stefan Cutajar
Stefan Cutajar
7,745 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
PRO
Zack Lee
Pro Student 17,644 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.