Quick Tip: The Multi-Column CSS3 Module
Tutorial Details
- Technology: CSS
- Difficulty: Beginner
- Estimated Completion Time: 4 Minutes
For over six years, CSS3 columns have been available to us; yet, strangely, they’re rarely utilized. Because they currently are only supported in Mozilla and Webkit-based browsers, this means that – again – no support in Internet Explorer. But that’s okay! The world will not end if IE users see one longer paragraph. I’ll show you how to use this helpful module in today’s video quick tip.
Subscribe to our YouTube page to watch all of the video tutorials!
Prefer to watch this video on Screenr?
#container p {
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-moz-column-count: 3;
-moz-column-gap: 10px;
column-count: 3;
column-gap: 10px;
}
- column-count: The desired number of columns for the element.
- column-gap: The padding between each column.
- column-rule: The divider for each column; can be used to specify a border.
- column-width: Used to specifically state the width of each column.
Please note that we must prefix each property with the -webkit or -moz, accordingly; so: -webkit-column-count.
Do you use CSS columns in your projects? If no, why not?
Enjoyed this Post?
Subscribe to our RSS Feed, Follow us on Twitter or simply recommend us to friends and colleagues!
By Jeffrey Way
Join our newsletter!
Create a Tutorial, Get Paid!
Have something to teach the world? Want to earn money doing it? Tutorials, screencasts, and articles published here on Nettuts+ are largely contributed by readers just like you! We'll pay you great money for good content. Find Out More
very good post thanks a lot
Simple and clear, Still getting amaze to what css3 does.
Yeah definitly,
Wish we all could use css3 for our commercial clients but unfortunatly- nobody wants to be that prick that forces their visitors to work with some kind of browser….
Sooooo, we’ll just have to wait :)
Nice post!
great post..nice execution….thanks….
Hi, Jeffrey!
Very interesting post. I have a question:
What if I have a paragraph of only five words (one sentence) and use these properties, let’s say-webkit-column-count: 5;?
Does it separate each word in a column? Is there a way to control the minimum of lines before the jump to the next column? Otherwise I do not see that this is really useful with dynamic content in which we can not know the extent of the paragraph. Greetings from Argentina.
You could make a little PHP script to help decide how many words/column, then add variables to your CSS like so:
http://net.tutsplus.com/tutorials/html-css-techniques/how-to-add-variables-to-your-css-files/
Nevermind, I’m retarded. Please just use jQuery and modify the classes like that to save yourself a huge headache.
It would make a nice piece of JS to all you CodeCanyon eagles out there..
Thanks for the info. I´ll wait for the CodeCanyon fix.
Nice tip Jeffery! You could use the script Columnizer – http://welcome.totheinter.net/columnizer-jquery-plugin/ , to fix this for IE.
I dont know if people are ready for Multi-Column layouts yet, most people are used to one column layouts and will probly be confused if the webpage acts like a newspaper, although it looks nice.
Yet another reason to hate Internet Explorer
This is awsome! Did not know about this =/
Nice how it degrades in “non willing” browsers without any extra work :)
As cool and convenient as this is, I think its largely lost in the context of the web. Its not natural for text to be displayed in columns most of the time on the web–even on some sort of periodical’s website. There are times when you have short blocks that it looks ok, but we’ve had the larger columned layouts shot down by our usability teams before.
Great post as usual, Jeffrey.
At the moment I´m not using CSS columns in my projects but I´m working on a CSS3 design “just for training” where I will use it.
I really like your articles here on envato. You are the man who made me use and love jQuery :)
This was very cool.
Thank You Jeff.
I agree, it just doesn’t feel natural to read columns online unless they are broken up with headers. I use CSS3 columns for long lists and it works really nice!
I use CSS3 columns for all my blog posts. I also like using them in the footer for link lists, although its a real pain coming up with something different for IE
I actually just started using this on a small portfolio site I’m building for myself trying to go freelance… and there’s some weird quirks. For one, it appears Firefox will calculate the width of such columns as the width of the parent container and thus, columnized text inside a div can be floated.
Webkit ala Safari and Chrome do not do this, and as such the parent div gets full block 100% and won’t float. You can see this on http://webkicks.dotink.org by setting your resolution to 1280×1024/960 and/or just resizing the browser to that.
Look at it in Firefox and then in Chrome. The difference should be noticeable.
This would be SOOO useful on our site, it is so annoying having to do floats for a simple thing like columns.
Shame IE is still too far behind to allow us to use this with confidence.
Nice! Thanks for sharing this…
Great tips. I will use them.
Great and easy-to-understand tutorial, thnx!
nice tip…thanks master…
Thanks for this article.
The CSS3 opens great new perspectives and it’s really cool :)
nice tip, but these css3 actualy doesnt work in all browsers.. Like opera doesnt support css3, ie lte 7 too.
Nice feature , thanks for that tip :D
Unknown for me. Very cool, thanks for sharing ;)
Regards
This is one paragraph stretched across three columns, can you use the same technique for three columns each with separate content? (In other words, a basic three column page layout.)
Ive already use multy columns in all the major browsers with the help of jQuery: See this post http://www.paitadesign.com/blog/css3-jquery-columns-layout-multi-colonne/
column-gap freaks me out!!!! =). Ty for the quicky.
Very……nice….!!!!!!!!!!!
Once again, great features like these are useless if the majority of folks can’t use them — IE users.
I so hate that I found this tut tonight and not this morning.
I have a list of 100 checkboxes (normally excessive). I did put them into three columns the hard way!.
I’ve seen a lot of awesome fancy HTML5 stuff wich I really want(ed) to use,
but each time i see a failing IE my motivation gets smacked out.
How long will it take before it’s “safe” to use this you think?
It is safe to use right now. If we don’t start using new technologies, there’ll be no incentive for IE to implement them.
Plus: http://dowebsitesneedtolookexactlythesameineverybrowser.com/
Column-count is also broken in Opera, as of version 10 anyhow.
NICE. I like how this work, it like you can make your own news paper now lol :D
I’m trying out multi-columns in combination with media queries on my blog: http://www.mindgarden.de/combining-css3-media-queries-and-multi-columns
I’ve done this in 2009 and the Safari bug I’m describing in my post seems to be slightly fixed but sadly not fully resolved…
I really like the idea of CSS3 columns, but I was there was a way to insert a Word-style column break. If I leave it up to the browser to decide where the column breaks, I sometimes end up with a situation where the header of a section is one column and the actual text is in the next one.
That is really awkward and the only solution I’ve found so far (which is really crappy) is to adjust the amount of text in the preceeding sections to make the columns look like I want.
I think with a little work tables can be avoided using css3 columns, i mean tabular data can be displayed with using tables while using columns technique.
if you can not just code tutorial CSS alone but all the same HTML code to call CSSnya, let a novice can understand more
I think that people, who use IE, won’t mind getting to see antiquated presentation; they’re used to it and don’t wish more anyway. So why should we help hold back the development of the web and wait for IE to catch up all the time?
Thanks for posting this, I had always wondered if it would be possible to do this in a semantic way; now I know I can, I’ll be having a play with this when I get home from the office!