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

Posted by Damien Corvan
.a{fill-rule:evenodd;}techdegree
Damien Corvan
Front End Web Development Techdegree Student 6,066 Points

Problem with clearing floats in my gallery section

Hi,

I am just finishing project number two in the front end development tech-degree. Everything is working correctly but I am having a problem with clearing floats in my two column layout. At a certain screen size the layout jumps and then corrects is self again. Any help would be appreciated.

My Project is on github https://github.com/dcorvan500/Tech-Degree-Project-Two

4 Answers

Jesus Mendoza
Jesus Mendoza
23,289 Points
Jesus Mendoza
Jesus Mendoza
23,289 Points

A live demo would be appreciated

Damien Corvan
seal-mask
.a{fill-rule:evenodd;}techdegree
Damien Corvan
Front End Web Development Techdegree Student 6,066 Points
Damien Corvan
.a{fill-rule:evenodd;}techdegree
Damien Corvan
Front End Web Development Techdegree Student 6,066 Points

https://1drv.ms/v/s!AvXPFGeZjpfFlx7HiGGq6ufpO9Ay

Here is a video link to my issue.

Jesus Mendoza
Jesus Mendoza
23,289 Points

That's probably because of your media queries, they're too small so your images don't have enough space and jump to the next line

Damien Corvan
seal-mask
.a{fill-rule:evenodd;}techdegree
Damien Corvan
Front End Web Development Techdegree Student 6,066 Points
Damien Corvan
.a{fill-rule:evenodd;}techdegree
Damien Corvan
Front End Web Development Techdegree Student 6,066 Points

Thanks for your input but it is not because of space, I used percentages when developing the portfolio section. It is a float problem I am having because I float elements in the portfolio.

Jason Anello
PLUS
Jason Anello
Courses Plus Student 94,610 Points
Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Damien,

To get you started, the following video shows the problem you're having along with a solution using nth-child to clear the floats.

https://teamtreehouse.com/library/how-to-make-a-website/responsive-web-design-and-testing/build-a-three-column-layout

Post back if you're stuck with implementing it in your project or if you have any questions about it.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Also, if you're replying to someone's answer then please use the "Add Comment" link below that answer rather than adding another answer to the question.