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

HTML How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Reagen Rahardjo
Reagen Rahardjo
3,770 Points

clear item for the nth-child

Hi,

In the video, it says because one of the images text is too long it makes the 4th image going into the wrong place, and then it use the nth-child(4n) to select the 4th item and clear: left; to fix it

My question is whats the function of clear: left here? what is it to be clear? when the picture going to the wrong place and have empty space on the left, is the browser assume there an empty item there so the picture going into the wrong place?

Thank You

1 Answer

So typically a float based layout (which I assume is what is being used here) will take all elements and shift them to the right/left of each other. So say you have a list of items with all of their children receiving float: left. The 5th item in this instance gets pushed to the right of said element, but what you may want is for it to "clear" underneath the 4th item.

I made a small code pen which illustrates this concept for you: http://codepen.io/anon/pen/NNJxwO if you want to see what clear does just take .item5 and remove the clear.

Chris Coyier has an extremely useful article on nth-child here: https://css-tricks.com/useful-nth-child-recipies/

I hope this helps you further understand the concept!