Quick Tip: The Multi-Column CSS3 Module
videos

Quick Tip: The Multi-Column CSS3 Module

on May 28th 2010 with 43 comments
Tutorial Details
  • Technology: CSS
  • Difficulty: Beginner
  • Estimated Completion Time: 4 Minutes
Download Source Files
Demo View It Online
This entry is part 6 of 16 in the CSS3 Mastery Session
« PreviousNext »

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?

Final Product
#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

Rollover to read this author's bio or click through to see a full list of posts by this author.

I'm the editor of Nettuts+, and love making the process of building for the web as easy as possible. I'm incredibly passionate about modern software development, and am the author of Laravel Testing Decoded! If you want be friends, say hi on Twitter.  

Plus Premium
 
 
Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://ds.laroouse.com piyanistll

    very good post thanks a lot

    • http://www.sandman6665.com sandman6665

      Simple and clear, Still getting amaze to what css3 does.

      • Alex

        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!

  • http://laira.pathseek.info/ Laira

    great post..nice execution….thanks….

  • rich

    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.

    • w1sh

      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/

      • w1sh

        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..

      • rich

        Thanks for the info. I´ll wait for the CodeCanyon fix.

  • Felix

    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.

  • http://www.gregbabula.com Greg Babula

    Yet another reason to hate Internet Explorer

  • http://michaelrijsdijk.nl/ Michael Rijsdijk

    This is awsome! Did not know about this =/

    Nice how it degrades in “non willing” browsers without any extra work :)

  • jem

    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.

  • Bastian

    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 :)

  • Ciwan

    This was very cool.

    Thank You Jeff.

  • http://montanaflynn.me Montana Flynn

    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!

  • Brad

    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

  • http://webkicks.dotink.org Matthew J. Sahagian

    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.

  • http://www.webcoursesbangkok.com Carl – Web Courses Bangkok

    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.

  • http://www.johnwooten.info drumkeyjw

    Nice! Thanks for sharing this…

  • http://www.maiconweb.com Maicon Sobczak

    Great tips. I will use them.

  • http://pipebomb.se Niklas

    Great and easy-to-understand tutorial, thnx!

  • http://beben-koben.blogspot.com/ beben

    nice tip…thanks master…

  • http://all-for-design.com/portfolio Auré

    Thanks for this article.
    The CSS3 opens great new perspectives and it’s really cool :)

  • Donatas

    nice tip, but these css3 actualy doesnt work in all browsers.. Like opera doesnt support css3, ie lte 7 too.

  • http://www.matshoof.com hakemsaeed

    Nice feature , thanks for that tip :D

  • http://php.quicoto.com/ quicoto

    Unknown for me. Very cool, thanks for sharing ;)

    Regards

  • http://www.designshack.net Joshua Johnson

    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.)

  • http://www.paitadesign.com/blog Giacomo

    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/

  • Fº

    column-gap freaks me out!!!! =). Ty for the quicky.

  • Manipalrajesh

    Very……nice….!!!!!!!!!!!

  • http://www.coolvibe.com James

    Once again, great features like these are useless if the majority of folks can’t use them — IE users.

  • http://createmy.com.au Dale Hurley

    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!.

  • http://www.buitenaardig.nl/ Phil

    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?

  • John

    Column-count is also broken in Opera, as of version 10 anyhow.

  • http://www.webdesignerguy.info Jarod Billingslea

    NICE. I like how this work, it like you can make your own news paper now lol :D

  • http://mindgarden.de tobs

    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…

  • Jeffry van der Goot

    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.

  • http://www.technbuzz.com Samiullah Khan

    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.

  • http://www.rizkyzone.com Rizkyzone.com

    if you can not just code tutorial CSS alone but all the same HTML code to call CSSnya, let a novice can understand more

  • http://denarend.com/ Lucien den Arend

    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?

  • http://nucleardove.com Matt Sheppard

    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!

  • http://twitter.com/edgarascom Edgaras Designer

    IE hits again… ;D