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 How to Make a Website Responsive Web Design and Testing Build a Three Column Layout

Posted by Arnas Milaševičius
Arnas Milaševičius
829 Points

Why clear:both won't clear the right side?

'''css #gallery li:nth-child(4n) { clear: both; } '''

So I was watching this video and Nick wrote clear: left;, but I decided to write clear:left; and it had the same effect. I thought it would push the element down that's on the right, but it didn't. Can somebody explain why?

RAFAEL COSTA
RAFAEL COSTA
6,243 Points

Hi Arnas! In css there is no difference in setting "clear:left" or "clear: left". but when you're reading the code it is really most "readable" with an space between the : and the value. In fact this "clear: left" is telling the fourth element not to allow nothing on it's left side, so it goes down. If you set "clear: both" then the next element (the fifth) will also go down. Maybe you can set your code here for more help! :)

Arnas Milaševičius
Arnas Milaševičius
829 Points

Huh? I already said that the fifth element didn't go down. And why did you mention that space between ":"? I have no idea.

RAFAEL COSTA
RAFAEL COSTA
6,243 Points

Sorry Arnas. I confused a little bit because you wrote "left" instead of "both" in your explanation ("...but I decided to write clear:left"). I tried the same and it didn't cleared too. So here is the cause: When we use the "clear: right" we do not clear the next element on the right position, but the next elements that have the property "float: right". In this case, every element " l1 " have the "float: left". That's why "clear" only affects the left position.

2 Answers

RAFAEL COSTA
RAFAEL COSTA
6,243 Points

When we use the "clear: right" we do not clear the next element on the right position, but the next elements that have the property "float: right". In this case, every element " l1 " have the "float: left". That's why "clear" only affects the left position.

Arnas Milaševičius
Arnas Milaševičius
829 Points

Thank you, it makes sense now!

RAFAEL COSTA
RAFAEL COSTA
6,243 Points
RAFAEL COSTA
RAFAEL COSTA
6,243 Points

Hi Arnas! In css there is no difference in setting "clear:left" or "clear: left". but when you're reading the code it is really most "readable" with an space between the : and the value. In fact this "clear: left" is telling the fourth element not to allow nothing on it's left side, so it goes down. If you set "clear: both" then the next element (the fifth) will also go down. Maybe you can set your code here for more help! :)