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

Ayush Bahuguna
Ayush Bahuguna
2,092 Points
Posted by Ayush Bahuguna
Ayush Bahuguna
2,092 Points

I did not understand the logic behind clearing the 4th element to the left.

After clearing the 4th element to the left, wouldn't the 5th element be in the same position? So, why isn't it getting pushed down? The caption would still be wrapping if we change the size of the window.

Chyno Deluxe
Chyno Deluxe
16,936 Points

Hey Ayush Bahuguna can you please post your code or post a WorkSpace SnapShot.

How to post Code

2 Answers

Chyno Deluxe
Chyno Deluxe
16,936 Points

Ahh. So basically what happens is when Nick clears the forth item in the gallery, what the browser is doing is creating an "invisible line" BEFORE the fourth element. So when forth item is cleared it gets pushed to a new line and since the images are floating elements the 5th image will float left relative to its position in the HTML. so it will follow the forth image rather than replace its position with the forth element.

I hope this helps. Let me know if you have any other questions or still need help understanding.

Ayush Bahuguna
Ayush Bahuguna
2,092 Points
Ayush Bahuguna
Ayush Bahuguna
2,092 Points

Hi, can you explain the " "invisible line" BEFORE the fourth element" part of your answers?

Thanks

Chyno Deluxe
Chyno Deluxe
16,936 Points

Sure. It's not REALLY an invisible line lol but i used that as an example for a visual purpose but below is the definition of the clear property as per W3School

Clear Property

  • The clear property specifies which side(s) of an element other floating elements are not allowed.

What happens when you float an element is the element itself gets taken out of the normal flow of the webpage. So the floating item ignores the HTML structure to a certain extent. So using the clear property, depending on the value (i.e clear: left, right or both), will determine what the next floating item (Sibling) will do to fall back into a normal float relative to its position in the HTML.

Ayush Bahuguna
Ayush Bahuguna
2,092 Points
Ayush Bahuguna
Ayush Bahuguna
2,092 Points

Chyno Deluxe . Hi. My query is related to the video lesson. The 5 items were put in three columns. And every time the window would get re-sized, then somewhere before the 480px break-point, the 4th item would get pushed out of the way. To tackle that, the Nick Pettit typed a code to clear the 4th item to left. I cannot understand the logic behind this move.