Determine the Width of a dynamic CSS3 Multicolumn DIV width fixed column-width

Question

I have a DIV container filled with a dynamic text. The length of the text can be different. The DIV container has a fixed height but no width.

Answer 1

I ran into the same problem trying to paginate an article horizontally using css3 columns as pages. Here's my solution as a jQuery plugin:

http://jsfiddle.net/rkarbowski/Sfyyy/

Here's the idea: you insert a blank tag at the end of your column content and use .position() to grab its left position relative to the parent container, and add one -webkit-column-width (because .position() only tells you the distance to the left coordinate of the ).

Here's a little quirk that I don't understand. To get the correct width, you also have to subtract one -webkit-column-gap. In my mind, the distance between .position().left and the edge of the container should only be the width of the final column, -webkit-column-width. Can anyone explain this one? Am I just bad at math?

Sorry if the plugin code is sloppy; my experience with jQuery is limited :)

(Credit where it's due: idea adapted from How to Get CSS3 Multi-Column Count in Javascript.)