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 CSS - Beyond the Basics Understanding Flexbox and Multi-Column Layout Multi-Column Layout

Jake Fleming
STAFF
Jake Fleming
Treehouse Guest Teacher
Posted by Jake Fleming
Jake Fleming
Treehouse Guest Teacher

There seems to be issues with the way that chrome aligns list items in a multi-column layout. Any solutions?

Check out this image to see what I mean.

I've found some articles on this issue, with no luck finding a solution, but was curious if you knew something they didn't?

Thanks!

1 Answer

Máté Végh
Máté Végh
25,607 Points
Máté Végh
Máté Végh
25,607 Points

Hey Jake,

I noticed that if I add both top and bottom margins to the list items, or bottom padding to the ul, it will cause the same issue as you had. See what happens when you uncomment the 10th-11th and 18th-19th row: http://codepen.io/anon/pen/RNvqNQ

Here is a solution I would suggest:

  • don't use both top and bottom margins on the list items, only one at a time
  • don't add bottom padding to the ul (top padding seems to be okay)

Funny glitch by the way, hope it will be fixed soon!

Update: It also glitches if I change the column count to 5, 7, 8 or whatever. And it's not only doing this to list elements, it does the same issue to any HTML element which has some top or bottom margins or paddings.

I also found this on caniuse.com: "Chrome is reported to incorrectly calculate the container height, and often breaks on margins, padding, and can display 1px of the next column at the bottom of the previous column." (http://caniuse.com/#feat=multicolumn)

I don't think there's a solution for this now, I think we just have to wait until it gets supported. Anyway, I'm really looking forward to this, because it could be so useful sometimes.