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 Randy Preising
Randy Preising
3,254 Points

Multi-column in Chrome

I've been trying out the multi-column property for a client site, mostly with good results. However, Chrome doesn't seem to be splitting my lists the way I want.

I did a quickie example in a workspace ... https://w.trhou.se/wzzqxb9fnu

I have two unordered lists with three list items in each. I've set up the property to display two columns, and I want each list to stay in it's own column. Safari and FF display properly (even though I didn't include the moz prefix, and some of the margins are funny). The preview in the Treehouse workspace looks fine, yet the preview on my own system doesn't. It will initially show two columns, but when I resize the browser it snaps to one column at wider widths. So the two columns only shows on smaller widths. It's also doing this via the live preview from my Brackets app.

I had hoped the workspace would show the error.

Am I marking something up incorrectly? Or is this an issue with Chrome? I know there have been other problems, as reported here ... https://teamtreehouse.com/forum/there-seems-to-be-issues-with-the-way-that-chrome-aligns-list-items-in-a-multicolumn-layout-any-solutions

... but this seems to be something else.

TIA

Jeff Lemay
Jeff Lemay
14,268 Points

I've had issues with columns in certain browsers at certain screen sizes and it was an issue with how pixels are rendered when you have an odd number. So if you're at a screen size where your container is 701px, the columns are supposed to be the same size. But you can't really render half pixels so the size is rounded up and causes the columns not to fit side-by-side.

I'm curious why you chose to use column-count instead of just setting a percentage width on the columns and floating them or using inline-block.

Randy Preising
Randy Preising
3,254 Points

I wasn't aware I could use percentages with the multi-column property. All the examples I've seen just give a hard number for the number of columns.

Jeff Lemay
Jeff Lemay
14,268 Points

What I mentioned would mean you don't use the column-count property. You just set widths to the two unordered lists:

ul {
    width:50%;
    float:left;
}

ul {
    display:inline-block;
    width:50%;
}

I would only use inline-block if you are using box-sizing:border-box though. Box-sizing means that padding does not add on to that 50%. In years past, this was not an option, so you had to set the element to be something like 46% with 2% padding on each side.

Most importantly though, I avoid column-count unless I am trying to split a single paragraph element into two columns (or similar element with text).

Here's a couple overviews of inline-block vs float: http://stackoverflow.com/questions/11805352/floatleft-vs-displayinline-vs-displayinline-block-vs-displaytable-cell

http://stackoverflow.com/questions/15172520/advantages-of-using-displayinline-block-vs-floatleft-in-css

Randy Preising
Randy Preising
3,254 Points

Thanks, Jeff. I have more homework to do.