jQuery Columnizer Plugin Examples

About

Columnizer will automatically split your 1 div of content into as many columns as will fit the user's browser! If the browser is resized, columns will be automatically added or removed appropriately.

Samples

sample 1 - Shows two independent columnized sections of text, a top and bottom section.

sample 2 - Shows two independent columnized sections of content with both images and text.

sample 3 - This example shows text being columnized into a top fixed-height section, and then overflowing into a columnized bottom section.

sample 4 - Preserves JavaScript events on <a> tags of the columnized content.

sample 5 - Fixed height and horizontal scrolling columns.

sample 6 - Style the first column differently than the rest of the content.

sample 7 - Columns wrap around an image in the top right of the page.

sample 8 - Lays out and preserves entire blocks of content into columns.

sample 9 - Uses columnizer to paginate content into a multi-page newsletter layout.

sample 10 - Shows zero padding between columns.

sample 11 - Shows CSS specified padding between columns.

sample 12 - shows mix of automatic columns and manual column breaks.

sample 13 - shows only manual column breaks.

sample 14 - shows column break inside of a dontsplit item.

 

GitHub Issues

Issue 12 - fix infinite loop when using dontend and specifying a height.

Issue 30 - fix infinite loop with double spaces in text.

Issue 45 - don't re-indent the first line of a split paragraph.

Issue 47 - fix infinite loop when using dontsplit and specifying a height.

Issue 47 (2) - fix infinite loop when using dontsplit without specifying a height.

Issue 49 - make sure columnizer doesn't duplicate text nodes.

Issues 51, 24 - missing content when columnizer is called from script in body below content.