Here is an example of a simple three-column class:
.three-col {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap: 20px;
}Of which you would apply to a block of text like so:
<p class="three-col">Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>Example
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus
Note that the height of each column is auto-balanced, as per the spec.
Also note this demo and sample code is using moz and webkit vendor prefixes, should only work in Gecko (Firefox 1.5+, et al.) and Webkit (Safari 3+, Chrome, et al.) browsers. No native support in Internet Explorer or Opera yet that I know of.
All Related Properties
.three-col {
-moz-column-count: 3;
-moz-column-gap: 20px;
-webkit-column-count: 3;
-webkit-column-gap : 20px;
-moz-column-rule-color: #ccc;
-moz-column-rule-style: solid;
-moz-column-rule-width: 1px;
-webkit-column-rule-color: #ccc;
-webkit-column-rule-style: solid ;
-webkit-column-rule-width: 1px;
}You can also set the column-width (with prefixes) but it generally makes more sense to let it auto calculate that.
The rule (“rule”, as in, a line) will split the gap down the middle. You can use the same values as you would a border.
Take care not to have your text blocks be so enormously tall that they are taller than a (fairly small) browser window, otherwise it’s the same problem as text being wider than the browser window (scrolling back and forth to read = sucks). Also consider text-align: justify;
JavaScript Fallback
Is presented in this A List Apart article.
just ordinary question like always :-)
is IE also compatible with this column-count?
thanks
Hi, I was just refreshing myself on this technique and tested it in a bunch of different browsers. IE 9 and under provide no support to this at all, so you should use a jQuery plugin as a fallback.
I tested in the IE 10 platform tester and it does indeed work, and without vendor prefixes. I guess better late than never.
I’m taking a web design class and everyone else is putting a simple 2 column layout into use and I can’t figure it out. I already get the html part but I can’t seem to figure out how to get the columns to appear on my site/sites. It seems pretty simple but I just don’t get it. I only got 1 column going so far, that’s all I can seem to do so far. I know everything else about the design and the layout of the column (floating, padding, width, etc.) but I can’t get the foundation down. His site is http://www.htmldog.com
He says in the article..
“sample code is using moz and webkit vendor prefixes, should only work in Gecko (Firefox 1.5+, et al.) and Webkit (Safari 3+, Chrome, et al.) browser”
It looks like IE is not a compatible browser at this time.
Still, it degrades nicely to a single column – yet again, IE users get the information in a logical, normal manner, just not as visually pleasing!
It works in IE with the JS fallback.
The ALA article was from 2005. I wonder if anyone has come up with any new fallback scripts in the last six years. Mainly for IE since probably 99.9997% of other CSS browsers in use these days probably support the multi-column layout module.
Yes, in fact this doesn’t work in IE9 either, and the scripts from that article are from the early ’00s
who cares of IE6 :P
IE is losing market anyway.. bring on the CSS2.1 + :)
good, nice artical
This seems to work in the latest version of Opera. Using Opera 11.10 and Dragonfly I was able to apply the css. Here is a <a href="screenshothttp://dl.dropbox.com/u/886672/css-tricks/multiple-columns-works-in-opera.png">screenshot</a>
Oops looks like I mangled that lets try this: http://dl.dropbox.com/u/886672/css-tricks/multiple-columns-works-in-opera.png
-moz-column-count:2; /* Firefox /
-webkit-column-count:2; / Safari and Chrome */
column-count:2;
Does this work with just text? Or can one use images along with text? Fairly newcomer so excuse the seemingly silly ?
I wrote a blog article on this just the other day :) Great Stuff. Wish it had IE support though…
Another jquery fallback can be found here: http://welcome.totheinter.net/columnizer-jquery-plugin/
I just started looking into this tonight, so i haven’t had much of a chance to test it…..have no idea if its a better option than the ALA thing
many thanks – just what i need
Is it me or is the text blurred, for a site which aims to teach, maybe you should get that sorted out.
Just gotta be careful about applying columns to more than one paragraph as Webkit browsers will wrap margin around to the next column making it look wonky. That behaviour pretty much makes them unusable for me.
This is a 2.25 year old problem as described here, and somehow not improved since
http://welcome.totheinter.net/columnizer-jquery-plugin/
chk this might help i was looking for same.
Useful tip, but sad on “No native support in Internet Explorer or Opera yet that I know of”.
Is it working in “webpage print.” I checked it with same css property, but not working. If anyone aware with print option let me know.
Its working good.
What happens if the content is too large. I need to find the number of columns if the content is too large. I have implemented a slider but its keep on sliding have to stop with last content.
These property not working all in FF!! bastard
They do indeed. Maybe you’re not copy/pasting correctly… rolls eyes
Just wrote about this and used Codepen to embed a working example but need to fix the width so the pen works. The code works in WordPress but not in the Pen. http://wpsites.net/web-design/style-content-columns/#Add_Simple_Hover_Effect
How do i do this?
I tried using this today and the example given here is not a good one. If you apply the columns-count to multiple paragraphs (which is the most probable case), it will break the paragraphs in to columns instead of the whole area. It becomes very hard to read. So what you should do is apply it to a whole div / section.
I would disagree. The example is very good. It’s clear, concise and works great used in the example the author has provided. You simply have a different need, and the class can be applied very easily to any element you require (such as an enclosing div). “What you should do” is apply the lesson as needed. :)
Nice Article. This was right what i was looking for. Somehow I wonder if it would make sense for blog post to increase readability on large desktop screens.
This page suggests using column count and leave the browser compute the column width.
But experience shows that adaptation to various redering devices and better adaptation to the content is exactly the OPPOSITE !
You should better specify the column-width and not specify at all the colmun-count !
There are good reasons for that:
– The content can only be rendered according to some minimum widths of some elements.
– Easier reasing for text column is when columns do not exceed about 40 em (36 em is fine)
– in this width of 36 to 40em, it remains possible to insert illustration images
– for narrow lists, items are generally short and typical list of toponyms or people names will fit very well in all cases within 18 em
– the browser will then compute the number of columnns that can fit in the rendering window: best experience is when you use the full width of the screen each time as possible because it avoids scrolling.
– if you specify a number of columns, space will be either wasted on large screens (notably on notebooks and HDTV) so they’ll need to scroll down to read the content,, or lines of text will be too long for easy reading or the columns will be to narrow to fit the content very well, and reading will be also difficult or illustration images will no longer fit.
When the browser computes the number of columns with this initial width, it would remain unused space to the right, but the browser will then distribute that space equally on this number of columns.
– If only 2 columns can fit and not the third one it means that up to one half of a column wil lbe added to each column, so the minimal colmun-width of 18 em specified will become an effective colmuns width of 27 em, which is still reasonnably easy to read.
– If only 1 column can fit in the specified width, there could up to 36 em in the only column remaining: you reach the limit that human brain and eye can read a text (36 em is about 80 characters, i.e. the typical number of columns on a terminal or on a printed text with font size 13 pt on a standard A4 or letter page in portrait mode).
– now if the screen is so narrow that a single column of 18 em cannot fully fit, the browser will start reducing it, but the reduction will never reach zero (otherwise the terminal would not even be usable at all, even the smallest terminals, i.e. smartphones in portrait mode, offer a display area allowing to read about 40 characters, i.e. about 18 to 20 em.
So effectively I suggest using ALWAYS column-width: 36 em for paragraphs of text, and column-width never lower than 9 em for narrow lists of toponyms, or people names, or phone numbers. If you know the datatype of elements in a list and its expected length, you may use a narrower width (count about 0.5em per character).
Abandon completely the idea of using column-count, this is not nice at all !
But don’t forget to specify a column gap: it should be about 1em (use 0.5em to 2em only if you decide to use column-rule, and use only 1 px column-rules, either in colid or dotted styles (avoid dashed).
Summary:
{ column-width: 18em; column-gap: 1em; } without rules, or
{ column-width: 18em; column-gap: 0.5em; column-rule: 1px solid; }
Forget playing with other options.
Now it will be time to think about somethin else! pass time controlling column breaks inside elements where they are undesirable: notably it is often undesirable to have a table row being split across columns of a multi-columns layout. Style your “tr” elements with “column-break-inside : avoid”. You should also control page breaks inside the same elements, if possible (ideally we should be able to avoid horizontal column or page breaks within colgroups of tables, but unfortunately the CSS3 module still offers no support for that; what this means is that you should design your data tables so that they will fit cleanly within a single colmun of 36 em. Otherwise create tables one below the other (and don’t use them in a multi-column container.
Make sure that all your pages look OK with a 150% zoom level, on a smartphone. Look at how it behaves on a wide notebook, or in a very large and tall HDTV, seen at about 3 meters of distance. My suggestions work great on all devices, and with all assistive settings like zoom level.
Try first using my suggestions for your contents: it should work on all browsers. on all devices except when a user use very high levels of zoom (but this is not their normal reading experience
You’ll also see that for printed documents at font sizes of 9pt smaller than on screen at 12pt, 18em is also an excellent choice as it saves paper ! This saving is even more important if you print in landscape orientation: you can fit more column, and the rendered column width is nearer from the ideal line sizes !
The small print of footnotes (when you hae many of them, will fit in more columns that won’t eat a lot of the page surface and users can read more text in the main section of your document without having to read footnotes or turning pages.
And please press the browser editors by submitted your bugs so they correct the quirks in the CSS multi-column module. Cast your bugs if browsers fail to render your multicolmuns contents correctly with my suggestion.
Checking this page April 2, 2014, using IE 11 on Windows 7 . . . no columns.
it’s all cool but.. it’s not the same that Wookmark for example because if you want to print out your articles by date this feature will not help you – old posts will be shawn at the top of the page
Exactly. It truly is a multiple column layout. It works as a Masonry layout only if you don’t care about order. Masonry layouts place items horizontally then move down and insert where possible. Column layouts fill the first column all the way down then flow to the next. If you have random images then it works fine as a super easy masonry layout. Otherwise you need to work with a true masonry layout.
Hi, this is a simple but elegant solution, but on narrow screens the columns are very squeezed (in a responsive design).
Is there a way to add something like a column-min-width=250px, so that if the screen/container is smaller than that, then the content will be shown as one column (or the 2nd column will move below the 1st)?
Thanks!
Just change the number of columns in your small screen media query to one.
Nice Post!
Here is another example of Multi Column Design Layout Using Wookmark jQuery.
http://webmuch.com/create-multi-column-design-layout-using-wookmark-jquery/
Try this!
Hi – the columns works great but when i add a
<
h1> tag if it be centered or ranged right or left the column under the header has extra space on top, so all columns are not alligned. Is there a work around?
thank you
Melanie
Hello dear i have face problem here sorry for stupid things, anyone can solved my problem, will big thanks
How could I do this the old way? Floats left and right and a margin to set the “middle column”. My second doubt is: when the text flows from one column to the other, using this old school technique, should it me done totally manually?
Thanks for the useful article by the way. Kind regards from Brazil.