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
Bojana Skarich
3,260 PointsFloat drop issue
I added a sixth image to my gallery page, and now it is dropping below the second row. Any tips for hacking the
li:nth child(4n) clear: left
so that this code helps keep my sixth image from dropping below where it's supposed to go?
Thanks!
5 Answers
Jason Anello
Courses Plus Student 94,610 PointsHi Bojana,
In the Build a Three Column Layout video there is a code correction for the nth child expression in the teacher's notes below the video. It should be 3n + 1 instead of 4n. I recommend you read that to see the explanation.
This isn't going to help your problem here because that's only for the 3 column layout but it's a good idea to fix in case you add more than 6 images later.
The problem that you're having in 2 columns is the same as what was happening in the 3 column layout. You should be able to fix it with another nth child expression and float clearing placed in main.css where your mobile styles are.
You always want to have the 1st item in every row clearing the float. In a 2 column layout it would be the 1st, 3rd, 5th, 7th, and so on. 2n + 1 will select that. That will select the 1st item and then every 2nd item after that. Or every odd item.
Add to main.css:
#gallery li:nth-child(2n + 1) {
clear: left;
}
And in responsive.css: (I've added explanatory comments that you can remove)
/* We don't want the odd items from the mobile layout clearing the floats anymore
because this will mess up the 3 column layout. We have to set the clear property back to none
for those odd items. */
#gallery li:nth-child(2n + 1) {
clear: none;
}
/* Now we can go ahead and set clear: left on the correct items for a 3 column layout */
#gallery li:nth-child(3n + 1) {
clear: left;
}
Charlotte Winter
7,374 PointsAre the pictures all the same size? Maybe it doesn't fit with the margins you set.
Bojana Skarich
3,260 PointsYes, all the images are the same size. The sixth image only drops when I shrink the screen down to below 400px. Otherwise, it looks just fine. So it may have something to do with the media query.
Jason Anello
Courses Plus Student 94,610 PointsHi Bojana,
When your 6th image drops down is your 5th image on the right or the left?
Charlotte Winter
7,374 PointsCould it be that your caption is wider for this last picture, and is pushing it into the next line because it needs more space when shrink the screen because it needs more room?
Bojana Skarich
3,260 PointsGood point. I experimented with removing the caption entirely on my 6th image, but it still drops when I make my screen really small like for a smartphone.
Jason Anello
Courses Plus Student 94,610 PointsIt's likely that it is the 3rd image caption that's causing the problem. If the 3rd caption wraps to more lines than the 4th then it will extend down lower and this blocks the 5th image from floating all the way to the left. The 3rd image effectively blocks the 5th image and so it stays under the 4th image. Since there is not enough room now for the 6th image, it drops down to begin the 4th row.
Bojana Skarich
3,260 PointsJason,
When the 6th image drops below to the left on the 4th row, the 5th image actually moves to the right, occupying the space that the 6th image had taken up before.
Funny, huh? I can send you a screen shot if this is easier :)
Charlotte Winter
7,374 PointsHmm, I am running out of ideas. Do you have all your closing tags (li ul section) in the right places?
Hope you find the answer soon.
Bojana Skarich
3,260 PointsBojana Skarich
3,260 PointsHi Jason,
Many thanks for your very helpful and detailed answer. I added the code that you suggested, and I'm not having the 6th image float drop issue anymore! Thanks for posting the explanation also!
Jason Anello
Courses Plus Student 94,610 PointsJason Anello
Courses Plus Student 94,610 PointsYou're welcome!