How to get css3 multi-column count in Javascript

Question

We're using the new css3 multi-column layout properties to get our text into newspaper columns. Each column gets a fixed width, and the column-count defaults to "auto", which means that the browser decides how many columns there are.

How do we get the actual number of columns as an integer in Javascript?

If we query the css "column-count" (or -moz-column-count) we get either "auto" or a blank as a result.

Answer 1

The secret is to put a small marker at the end of the content. You can programmatically add an empty span:

<span id="mymarker"></span>

then grab the span using a jquery $("#mymarker") and get the "left" property. Divide that number by the width of the columns (adjusted for column-gap), and that will tell you what column this last element is in. Math.ceil() on the value and you have the column count.

Answer 2

Divide the column container's scrollable width by visible width:

container.scrollWidth / container.offsetWidth