Google analytics script

Latest jQuery CDN with code tiggling.

Saturday, 30 July 2011

Use CSS floats to flow data in columns rather than rows with jQuery .transpose() plugin

I know we have CSS3 multi-column layout that makes HTML content flow in columns dead simple but the problem is that only the most modern browsers (as of July 2011) support this CSS3 capability. As you might have guessed this means tough luck for Internet Explorer users. Microsoft decided that CSS3 column layout is not something developers or better web designers would need so IE still doesn't support it. Not even in version 9 that is.

Even though CSS3 multi-column support got supported recently we have been displaying data in pseudo columns for some time. We either displayed tables when we had tabular data or used CSS floats or CSS inline-blocks when displaying lists and we didn't want the list to be long and narrow which makes it hard to use. The nice thing about floating is that elements take as much horizontal space as they can inside container and when individual items are set a fixed width this means that they will display in column-like layout. The problem is though that floated items run in rows meaning that when you have alphabetic text (or numbers) list items they won't flow in columns as we're used to ie. in phonebooks. No. Items flow in rows. This makes these kind of lists hard to read and search through. But I have a solution for you. jQuery plugin that re-arranges your items into columns to improve their usability.