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
-
Are you talking about something like a newspaper layout? I know there are jquery plugins that will do that for you.codedude– codedude2010-01-12 22:42:27 +00:00Commented Jan 12, 2010 at 22:42
Add a comment
|
3 Answers
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
2 Comments
Daniel
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.
Artur Haddad
Broken link for Zen Elements
what about an <li> that is floated left and display:inline-block ?
3 Comments
Daniel
I think you may be on to something here. Is it possible to split the items into multiple columns automatically?
mkoryak
yes, if you set a width of the items and a height of the container div. they should fill in correctly
jpeltoniemi
@mkoryak It is indeed possible to emulate columns that way but the order is wrong. Columns are expected to build up from top to bottom and then sideways, not the other way around.
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.
Comments
