Display:none on parent element not rendering columnized content when displayed block.

[yumyam]

I'm using a jquery plugin to create tabs. Inside the tabs is content that is be columnized. The issue I'm having is that the tabs that are display:none when the page loads do not render any content that is columnized.

If you reload the page when that tab is selected however, the content does populate.

See this for example:
http://tinyurl.com/k6ll85f

[adamwulf]

Columnizer needs elements to have display to determine their size when columnizing. when elements are inside of a display:none, their size isn't available/trustworthy, so columnizer ends up creating invalid columns and generally messing up altogether.

to get around this, instead of using display:none, use visibility:hidden;position: absolute;. this will let the elements still have size and be 'rendered' properly with their layout, but won't show up on the page. this way, columnizer can still see how large/small elements are and can lay them out in columns. then, when showing your content, reset the visibility/position.

after content is columnized, it can be set to display:none without issue. but before it's columnized display:none prevents columnizer from working.