I have dynamic elements that I would like to flow downward and fill over multiple columns (like in Word, for example) rather than float left or right or stack in the typical manner. Are there any functions of CSS that make this possible? If not, what course of action can I take here?
+1
A:
what about an <li> that is floated left and display:inline-block ?
mkoryak
2010-01-12 22:41:40
I think you may be on to something here. Is it possible to split the items into multiple columns automatically?
hypoxide
2010-01-12 22:47:53
yes, if you set a width of the items and a height of the container div. they should fill in correctly
mkoryak
2010-01-12 23:14:57
A:
Are you talking about something like a newspaper layout? I know there are jquery plugins that will do that for you.
codedude
2010-01-12 22:42:27
+3
A:
It's possible but only in CSS3, which does not have the required market share yet to be used safely.
Check this article on Zen Elements for details.
A workaround until CSS3 is "mainstream" could be a Javascript/JQuery based solution like this one: Columnizer jQuery Plugin
Pekka
2010-01-12 22:42:33
Excellent. I was always afraid to delve into jQuery but I was silly to think it would be complicated! Very easy and great examples. Thanks.
hypoxide
2010-01-12 23:06:43
+1
A:
CSS3 makes it possible (explanation/description here), but it's not widely supported yet: only recent versions of Firefox and Safari (as well as other webkit-based browsers, probably) support it.
JavaScript is your best bet if you absolutely need this to be flexible and general. If you're doing it just for one specific piece of text, you could also hard-code it.
Sam DeFabbia-Kane
2010-01-12 22:42:38