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

Andrew Lenti
seal-mask
.a{fill-rule:evenodd;}techdegree
Andrew Lenti
Front End Web Development Techdegree Student 7,193 Points
Posted by Andrew Lenti
.a{fill-rule:evenodd;}techdegree
Andrew Lenti
Front End Web Development Techdegree Student 7,193 Points

Keeping floated items lined up neatly in their 'rows'.

Hello, I am sorry to pose such a general question without supporting code but I am at a loss on how to explain my problem effective other than this brief explanation.

In short, I am working with floats and created a webpage with 6 pictures supported by paragraph text listed under each picture all of which is wrapped in a div for each picture. Which when going from narrow mobile devices, to tablets and finally to wide screens, the transition should be:

1- all divs lined up singularly one on top of the other - for mobile phones 2- 3 rows of 2 divs for tablets 3 - 2 rows of 3 divs for wide screens

My issue takes place when manually dragging the screen size. In certain situations when the paragraph text under the pictures grows to a height superior than that of the others in the same 'row', it immedialy kicks the item underneath it out of the row below where it is suppose to stay aligned.

I imagine that this may have something to do with in-line block but can't seem to make it work. Sorry for such a general question but any insite will be well appreciated.

Cheers, A

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

I think you need to find a way to remove the floats after a certain number of images in your row.

You can do this with a clearfix

.clearfix {
  content: "";
  display: table;
  float: none;
}

And then to apply it to every 3rd or 4th element try nth-child(3n) {} so it only applies a certain numer of times.