Why is my multi-column spacing not working in Chrome?

css google-chrome css-multicolumn-layout
harriyott picture harriyott · Nov 1, 2012 · Viewed 9.2k times · Source

My CSS columns are displaying differently in Chrome from how they're displaying in Firefox and IE9. This is the correct display in Firefox:

Columns in Firefox

Here's how it displays incorrectly in Chrome:

Columns in Chrome

I've tried changing the li to display: inline-block, which is an improvement of sorts in Chrome, but then the narrower list items appear in the same "cell".

I've made a JSFiddle to demonstrate the problem.

Answer

Deborah picture Deborah · Apr 10, 2013

Give both the parent element (in the example, it's the body tag) and the "results" div a CSS style of position: relative. (Also, remove the position:absolute from the .results CSS.)

body, .results {
  position: relative;
}

revised JSFiddle

In case body is not the parent element in your real use case, you just need a wrapper for the .results div with position:relative.

Related questions

Column-count is not working in Chrome

I have a text splitted in 4 columns and it works perfectly in Safari I don't know why I can see just 2 columns in Google Chrome. Tested with Chrome 55.0.2883.95 (64-bit) Any help would be greatly appreciated.

Read More
Why does Safari render CSS multi-column layout differently?

I'm building a website and testing it on Chrome mostly, intermittently checking if it still works on Firefox. I figured that, since both Chrome and Safari run on WebKit, they would render the website identically. This is not the case …

Read More
How to remove focus border (outline) around text/input boxes? (Chrome)

Can anyone explain how to remove the orange or blue border (outline) around text/input boxes? I think it only happens on Chrome to show that the input box is active. Here's the input CSS I'm using: input { background-color: transparent; …

Read More