Determine the Width of a dynamic CSS3 Multicolumn DIV width fixed column-width
css, html, javascript, jquery, multiple-columns
Solution
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 `<span>` 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 `<span>`).
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.)
Problem
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. The Text is formatted as CSS3 Multicolumn Text width a fixed `columns-width`. The result is `n` columns with the width of `column-width`. Now i want to know either how many columns are there or how is the computed `width` of the `DIV`. CSS CODE: ``` .columnize{ float: left; position: relative; width: 840px; overflow: hidden; } .columnize div{ -moz-column-width: 259px; -webkit-column-width: 259px; -moz-column-gap: 16px; -webkit-column-gap: 16px; height: 560px; } ``` HTML CODE: ``` <div id="columnWrapper class="columnize"> <div id="content"> ... content goes here ... </div> </div> ``` I tried to get the width with JQuery like this: ``` $('#content').width(); $('#content').innerWidth(); ``` both return the `column-width`, not the REAL `width` in all browsers except Firefox. Any ideas how to get the width of the column layout?