14

I've stumbled across a really great project (CSS3 PIE) today that makes it possible to use CSS3 rounded corners, shadows and gradients even in IE6, IE7 and IE8 using CSS settings and usual CSS3 notation.

It uses *.htc file that does the trickery and makes it really transparent for developers (as in set it and forget it - no additional script calls when creating new pages or changing existing ones (provided you don't change CSS)).

I wonder if there's anything similar for multi column layout that can be used. Floating is not an option because content is not laid out top to bottom - left to right, but rather left to right - top to bottom...

Anybody developing something similar for CSS3 multi column layout?

TylerH
  • 20,799
  • 66
  • 75
  • 101
Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
  • There is a polyfill (fallback) for CSS multi column layouts here: http://www.csscripting.com/css-multi-column/ – David d C e Freitas Nov 24 '11 at 07:11
  • 1
    @DavidFreitas: Couldn't get this running in IE9 also not the updated version [here](https://github.com/BetleyWhitehorne/CSS3MultiColumn). So I'm using the [Columnizer jQuery Plugin](https://github.com/adamwulf/Columnizer-jQuery-Plugin) now. No CSS parsing but otherwise ok. – johjoh May 23 '13 at 11:20

4 Answers4

8

Maybe the Columnizer jQuery Plugin?

Unfortunately, it doesn't parse your stylesheet and look for the relevant properties like CSS3 PIE does (a very convenient feature).

Both CSS3 PIE and that plugin rely on JavaScript.

thirtydot
  • 224,678
  • 48
  • 389
  • 349
  • I don't think this is really an option because it doesn't use CSS3 where multi column layout is supported out of the box... A similar approach to CSS3 PIE would be best because you can set it in CSS and forget it. No need to further call anything in your scripts. – Robert Koritnik Apr 15 '11 at 00:03
  • 1
    I agree. An option would be to use [Modernizr](http://www.modernizr.com/docs/#csscolumns) to detect native column support, and if not use that plugin. It's obviously nowhere near as convenient as CSS3 PIE is, but I *don't think* there's anything that matches what you're looking for out there. I really hope I'm wrong. – thirtydot Apr 15 '11 at 00:13
  • I still accepted your answer because it gets as close as it can get to multi-column CSS3 layout. – Robert Koritnik Aug 02 '11 at 11:35
  • @Robert Koritnik: Since I answered your question, I ended up implementing a quick-and-dirty solution for another answer: http://stackoverflow.com/questions/6225968/how-can-i-modify-this-algorithm-which-reorders-a-ul/6226097#6226097. If you added support for resizing to your plugin, that would be very useful. – thirtydot Aug 02 '11 at 12:01
  • I most likely will in one of the next versions. Watch the project on GitHub and you'll be notified when that comes along. :) – Robert Koritnik Aug 02 '11 at 16:07
5

Another solution for lists that should flow in column order (as in phonebooks)

I asked the question mainly because I had to display a list of about 1000 users. This kind of list is very long and involves a lot of scrolling. So I needed a solution to put these users in columns so they also flow from top to bottom column by column from left to right. CSS3 multi-column layout provides exactly what I need, but browser support is the problem. They're still not supported on IE9 and my users mainly use IE (8 or 9). Hence I needed a solution to work using CSS2.1

That's the reason I've written a jQuery plugin that takes a set of elements that are either set to float: left/right; or display: inline-block; and transposes them so they're ordered in the order of column layout.

Plugin reorders elements and doesn't add any column wrappers or anything. It just rearranges elements so they seem to be flowing in columns instead of rows.

You can check my blog post where the problem is detailed and you can also see a working example that rearranges/transposes US States. Or you can also watch the project on GitHub and get updates when a new version is out (or report issues you may have with it).

Community
  • 1
  • 1
Robert Koritnik
  • 103,639
  • 52
  • 277
  • 404
3

If you have simple list items, this might be enough https://github.com/hamsterbacke23/multicolumn-polyfill

MonkeyVoodoo
  • 538
  • 5
  • 17
1

you might like to try this one..

CSS3 Multi Columns

it's been a while since I tested it out, but it does mean you use the proposed properties so it can be used as an enhancement

I'll see if I can find my test case to put in a fiddle

Update

here's the Example fiddle

Notes (and disclaimer) it's been couple years since I did this demo, it won't work natively from the fiddle (what you'll see is what the browser actually supports), - for the script to work the CSS has to be in a linked file, which I don't think I can do on a fiddle, it puts it inline

Top half is showing what is supported or what the script can do if you download it, bottom is a (table based) mockup up of expectations according to the recs (though remember I said it's a few years since I did this)

neither Safari nor Firefox matches the "Expected: Table Mockup demo" but all browsers I tested in locally look the same.. with nice neat even columns, IE7 gets it 50% right it has 3 columns but only uses 2 of them?? - no browser does the heading spanning multiple rows, either natively or with the script, so I put that down to "a not yet decided upon feature" ;)

anyway just throwing it out there as an option - maybe someone with more savvy than me could improve the script?

clairesuzy
  • 27,296
  • 8
  • 54
  • 52
  • I don't like this solution too much because it uses HTML tables to achieve column layout. But this doesn't mean that someone else won't like it, so thanks for your answer. – Robert Koritnik Aug 02 '11 at 11:45