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 Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Width of bottom row messes up view of t-shirts

On this site I have changed the rows to display 4 products in a row rather then 3. Which works fine, however when I reduced the screen width to about ~1027px the bottom row of the products gets messed up. However all the preceding rows don't. I had a thought that it might be to do with because there are only 3 items on that row. But am not sure, below is the css;

#products div.product {
    float:left;
    display:inline;
    min-width:175px;
    width:25%;
    height:100%;
    border-top:2px solid #fff;
    margin-bottom:20px;
}

2 Answers

Garrett Sanderson
Garrett Sanderson
12,735 Points
Garrett Sanderson
Garrett Sanderson
12,735 Points

Hi Mayur,

Floats are really hard to control when you have so many going on. It throws off positioning alot and can make weird bugs like you are experiencing right now.

How I would solve this is by using display: inline-block instead of float: left;

You will have to adjust where your text is placed under the image now. But that makes your grid stay intact.

#products div.product {
    display:inline-block;
    min-width:175px;
    width:25%;
    height:100%;
    border-top:2px solid #fff;
    margin-bottom:20px;
}
Steven Parker
Steven Parker
243,228 Points
Steven Parker
Steven Parker
243,228 Points

I seem to remember in the course they applied a clearfix using :nth-child(3n+1) instead of relying on the floats to wrap properly on their own. You might try that trick (but use 4n+1).

Also remember when using calculated (percentage) widths to be careful to account for any margins, borders, and padding, both on the replicated elements and their container(s).

And for a completely different approach, this might be a good situation to use flexbox instead of floats.

Mayur Pande
Mayur Pande
Courses Plus Student 11,711 Points

Thank you for the answer. This also would have been a good solution, the other answer solved my issue.