Multi Column layout in CSS

Sholom Sandalow, Friday, July 7, 2006 @ 10:30 am

The World Wide Web consortium’s (W3C) CSS working group recently released a draft of a new multi column layout module--to be included (with possible modifications) into the CSS 3  specs.  For those web developers that have been lamenting the lack of adequate multi column support in current supported versions of the CSS specs, this is an exciting and welcome addition.

In this article I will identify the basic principles of the Multi-Column model as described by the W3C, and give some examples of how it might be used to layout web pages much more easily than is possible today.

Currently, all content within a content box flows left to right, and then top to bottom, filling the entire content box (minus padding). Multi Column Layout uses a new type of model for the positioning and flow of content within a content box.

The use of the column-box (or column for short) will specifiy that content within a content-box flow in a columnar fashion. Just like table cells in an HTML table. Columns in a content-box will flow from left to right.  The content within each column flows in the normal top to bottom direction.  From the W3C paper:

Content is flowed  into column boxes in the block-progression-direction, and column boxes (or  "columns", for short) are flowed into content boxes in the  inline-progression-direction.

The implications for web developers coding in CSS are tremendous.  The only way to create multiple columns in CSS now is by jumping through hoops.  A simple two column layout requires breaking a content-box into two child boxes and floating them.  Try adding another column and you’ll find it almost a nightmare to code it with enough hacks so that every major browser renders it to a  reasonable degree of similarity.  I have yet to see a fluid four column layout using current CSS box model techniques.

The Working draft offers promise that we can look forward to bieng able to code much more sophisticated web page layouts that are standards compliant,cross browser compatible, and flexible enough to render properly on many different types of devices.
The datails: Multi Column Layout using the ‘column’ property
Multi-column layout will be easy to create in CSS3.  Simply use the ‘column’ declaration on the appropriate content-box.

The Column-Count property
To specify the number of columns you want your parent content-box to be split into, simply use the ‘column-count’ property

body { column-count: 2 }

The Column-Width property
You can also specify the width of the columns by using the ‘column-width’ property.  If you don’t set the column count explicitly, the number of columns will be determined by the column width and the avaiable space within the parent content-box.

body { column-width: 15em }

The Columns shorthand
Use The shorthand ‘columns’ property to affect both the column width and the number of columns.

body { columns: 2 15em }

The Column-Rule and Column-Gap Properties
Use the column rule property to define the style of the rules that separate columns.  It is similar to the border property, and therefore takes similar values.
Use the Column-Gap property to define the width of the gutter in between columns.

body {
  column-gap: 1em;
  column-rule: thin solid black;
}

The ‘column-break-before’, ‘column-break-after’ and ‘column-break-inside’ properties
Use these properties to tell the browser where to break the content within columns.  In other words, the browser needs to know there to move content into a new column.  These properties specify when and where to move content to a the next xolumn over.

h1 { column-break-before: always }
h2 { column-break-after: avoid }
h1, h2 { column-break-inside: avoid }

Multi Column Layouts applied
Using the properties described above, we can quickly layout a page that uses a fluid four column grid in which each column resizes with the width of the browser window--something that is impossible using current CSS techniques. The code below will do the trick…

Create a content-box:

<div></div>

give it an identifier:

<div id=”mainContent”></div>

Now insert your content:

<div id=”mainContent”> Lorem ipsum dolar sit amet, cons incidunt ut labore et dolore magn trud exercitation ullamcorpor susc vel eum irure dolor in reprehende dolore eu fugiat nulla pariatur…</div>

Create a style sheet and style “mainContent” like so…

#mainContent {
width: 100%;
column-count: 4;
column-gutter: 15px;
column-rule: solid black thin;
}

and voila…
Content within “mainContent” flows from one column to the next.  And since the number of columns is explicitly stated and the column width has been set to auto (by default), the columns resize so that no matter what the window dimensions are, there will be 4 of them…Multicolumnlayout_2

Related posts:

  1. CSS 3: Multi-column Layout vs. Advanced Layout
  2. Multiple Column Sorting with Drag and Drop using Scriptaculous
  3. Mass Assigning Inheritance Column Values for ActiveRecord STI with Rails
  4. Thoughtful gesture? Peter Coffee’s column misses the point.
  5. .NET 3.5 Linq to Sql and IBatis.NET

Topics: ,

User Experience Design User Experience Design

Comments: 26 so far

  1. THIS IS USELESS

    Comment by MARK, Friday, July 7, 2006 @ 6:41 pm

  2. A great idea, alot of the CSS 3 stuff is going to be solid and eliminate alot of headaches. The only problem is that it won’t be useful until sometime in 2010 (when IE supports it). =0(

    Comment by Seth, Friday, July 7, 2006 @ 6:49 pm

  3. This isn’t entirely useless, Mark, but it would be useful for laying out text in online news and magazine sites, but probably not for sub-dividing a page into various (vertical?) sections such as navigation, content, sidebar, whatever you call such things. Perhaps something like Java’s various layout managers would be a good idea?

    Comment by Marc Fearby, Friday, July 7, 2006 @ 6:58 pm

  4. Hmmmm… Last year some hacks to implement this in CSS2 surfaced on the web, and my opinion is still the same. It’s a plus if the text doesn’t overflow the vertical size of the browsing area. What I mean is, if you have to scroll up and down (up and down, up and down) to read a 3 column text, you won’t be improving usability… you’ll be making it worse, won’t you?

    As with everything, always use with care. ;)

    Comment by andr3, Friday, July 7, 2006 @ 7:05 pm

  5. FWIW, I like the CSS3 multi columns. But seen current events with IE7, it will take some time (years) before Internet Explorer finally catches up.

    So, using CSS1 and Javascript, I made a script that can do somewhat the same as CSS3’s multi columns. Info here: http://randysimons.com/pagina_129_NL.xhtml

    (IE6 is supported)

    Comment by Fuzzillogic, Friday, July 7, 2006 @ 7:13 pm

  6. That’s actually pretty cool. I’m not moving away from tables until its easy to do so. This is a BIG step in the right direction

    Comment by Dan, Friday, July 7, 2006 @ 7:42 pm

  7. Aww, god…

    Columns were created for newspapers because they have limited page space. The web has *unlimited* page space and no one is going to be terribly happy with scrolling all the way up to the top of the screen to find the next column.

    Unless you fit all the columns on one page, this’ll be another overused and damnably annoying “feature” just like blink.

    Comment by Joel Fagin, Friday, July 7, 2006 @ 7:51 pm

  8. Looks great. Totally a HUGE step in the right direction..

    http://www.johnwiseman.ca/blogging/

    Comment by John Wiseman, Friday, July 7, 2006 @ 7:54 pm

  9. Where is this new draft? It isn’t at http://www.w3.org/TR/css3-multicol/

    http://developer.mozilla.org/en/docs/CSS3_Columns

    Comment by Phillip, Friday, July 7, 2006 @ 7:54 pm

  10. I fully agree with Dan on this one. The way in which the columns are proposed to be used are better rooted in print based media, and not on the screen.

    If anything the types of columns we as designers use are not the same as what is for the offering here. We dont want the ability to columnize our text blocks (this does have limited use). We want a more global industry adoption of standards so that current browsers (*cough*IE 7*cough*) support css like “display:table” and “display:table-cell” better.

    Comment by Garf, Friday, July 7, 2006 @ 8:01 pm

  11. Columns can be used to help set the maximum characters per line for easier reading. With widescreen formats coming to many PCs the ability to match line length and font size will be invaluable.

    Comment by Marcus McConnell, Friday, July 7, 2006 @ 8:11 pm

  12. With no disrespect to Fuzzillogic’s comment above, a working
    scripted solution was demonstrated over a year ago here: http://www.csscripting.com/css-multi-column/

    It has the added advantage of using the syntax from the proposed CSS3 spec, so that when there is actual support for it in browsers, the same effect can be achieved by just removing the script and without markup changes in the document.

    More discussion here:
    http://www.alistapart.com/articles/css3multicolumn/

    Comment by Meh, Friday, July 7, 2006 @ 11:38 pm

  13. This is great! Line length is still an issue in the browser and therefore columned text is welcome. Now we also need support for hyphenation and dare I say support for kerning pairs.

    Comment by Randy Troppmann, Saturday, July 8, 2006 @ 1:19 am

  14. This is awesome. I’ve heard someone saying that this might be coming up in a new version, but i wasn’t really sure, its refreshing to see it actually happening.. I’m excited to start using this new feature.

    Now we can only hope that there will be a way for us to impliment this on previous IE versions.

    Comment by Mike Caputo, Saturday, July 8, 2006 @ 2:38 am

  15. @ Marcus McConnell
    I’m aware of the csscripting.com-script. It’s nice that it uses CSS3 styles instead of some Javascript-hacks. However, it lacks the feature to “auto adjust” the number of columns according to the available space. I believe that is a required feature for fluid/liquid CSS designs. It would be nice to combine those features tho.

    And there’s nothing wrong with a bit of healthy ‘competition’ ;)

    Comment by Fuzzillogic, Saturday, July 8, 2006 @ 4:17 am

  16. “this is suseless”

    Are you mad, stupid or ignorant?

    Don’t you know that, as text lines become longer, the copy becomes much harder to read (a max of 2x alphabet lengths of the general rule of thumb).

    Do you really think that print typesetters for the last centuries have been layouting out pages in a columnar format simply for the fun of it? They could spread the copy across the whole width of a page if they wanted. Why do you think they dont? They realised long ago that readability is important, and splitting copy into multiple columns is the answer.

    Some smart ass is prolly going to answer “make a single, width restricted column”, so let’s head that one off; With the high resolutions we now enjoy, doing this will leave you with acres of dead space – unless you wanna fill more than half of the page with ads, which seems to be becoming the norm.

    The other salient point is a little something called “above the fold”. Scrolling sucks. Don’t take my word for it, just see the evidence from your web logs that show links and content below the fold – off the bottom of the browser window – doesn’t get anywhere near the amount of click thru/readership as that in the reader’s plain sight.

    With screen widths of 1900 now fairly common, and 1600 even more so, I say let’s use that width effectively and adopt the tried and tested column format in the name of readibility and visibility.

    Comment by Gareth, Saturday, July 8, 2006 @ 5:23 am

  17. “With screen widths of 1900 now fairly common, and 1600 even more so, I say let’s use that width effectively and adopt the tried and tested column format in the name of readibility and visibility.”

    Agreed. 1600×1200 now has a 1% adoption according to these statistics: http://www.utexas.edu/teamweb/reports/screen_resolution/index.php?log=Dec2005.log

    Bad and biased source? Probably. But then u’d better cite a better source.

    Comment by tedeh, Saturday, July 8, 2006 @ 7:17 am

  18. This is really helpful

    Comment by Lenard Dykstra, Saturday, July 8, 2006 @ 11:56 am

  19. For all you naysayers out there, I say baloney on you.

    The reason columns happened in newspapers were because when reading, people don’t like to scan more than a few degrees of eye movement.

    Newspapers have way more “on-screen” real estate than most monitors, and the column thing was to allow you to read down the page, without scanning
    left to right than was comfortable.

    Even XGA can accomodate 2-columns plus decoration well, and still provide continuity.

    Please, for blogs and news articles, give me a sideways scrolling multi-column format.

    Also, columns (and books) allow you to scan the next column (page) and last column (page) to allow quick looks forward or back into the text. This permits the reader to quickly review tricky content, or prepare theirself for the upcoming material. It’s not something most people are particularly concsious of doing, but they do.

    Retention is much better when read from a book or a multi-column text, than it is from single column (single sided print or web-based) media.

    Now that we are starting to get nice monitors, we are back at that problem. I don’t want to have to sweep my eyes 75 degreees to read each line, I’d rather have 5 columns of 8 point text, at about 10 degrees each.

    Comment by David Atkins, Saturday, July 8, 2006 @ 12:31 pm

  20. @ Marcus McConnell

    I do concept and copy for leading advertising agencies and one major insight is this: readers don’t like reading online. Online reading often involves reading tiresome line-lengths and scrolling, which sucks.
    It was, indeed, over a year ago that Cédric Savarese wrote this fantastic CSS-3-adaptation. I already use it on my website, not to show off intricate technology but to make text more readable, which is obviously the case if you brake it down to lines running short in multiple columns.
    Multi-column-layouts are an excellent solution to make online reading a much more relaxed experience, chucking out small bits of text one at a time.
    Check it out here:
    http://zemynt.de/artikel.php?artikel=a_new_ecology

    Comment by Carsten Teller, Saturday, July 8, 2006 @ 6:20 pm

  21. Some readers seem a bit naive here. What’s more annoying than a republican? Not much, but a web page where nearly 75% of the entire page is dead white space like this one, is pretty annoying.

    A web page that can fit a whole paragraph onto a single line is darned difficult to read. I end up highlighting line after line so I can keep track of where I am in the text as I read.

    Yes, multiple columns are GOOD. For some of us that do have post 1960s monitors and video cards, we run higher than 640×480 resolution and it’s danged annoyin to see holier-than-thou people spouting off about designing for 800×600 and “make them scroll” to read.

    Flexible design doesn’t mean make a web page that can expand to any width like a 5 gallon bag of water popped on a floor and spreading 75 feet in every direction. Extremes aren’t useful in either direction.

    Don’t waste 75% of my browser window with emptiness. Columns are good. Employ them. Make your presentation as good for me as it is for your ever so popular 800×600 user. Eventually they are going to get a modern computer like me, where are you going to be then?

    So stop being a turd and being negative about people who do big resolutions. Old UNIX users used to gripe about people writing emails with greater than 40 chars in width… Is this the modern version of lame criticizing reborn?

    Have a nice day :)

    Comment by David, Saturday, July 8, 2006 @ 7:47 pm

  22. This could prove to be a useful feature for portable devices. Browsers that run on lower resolution motitors (portable devices anyone?) could possibly adjust the number of columns.

    Comment by Anonymous, Sunday, July 9, 2006 @ 12:02 am

  23. Multi-Column layouts in CSS3

    Via Digg comes this excellent article on the upcoming specs for CSS3. Using the new column parameters, it will now be much easier to to create 2, 3 and even 4 column sites.
    You can check out the article here. In the meanwhile, check out Yahoos…

    Comment by Confessions of a Scotsman, Saturday, July 15, 2006 @ 7:19 am

  24. I work a lot with Japanese text and horizontal columns would be very nice in conjunction with top-to-bottom right-to-left text flow to get the native mechanics of the Japanese language.

    Comment by Everett Pilling, Wednesday, April 30, 2008 @ 2:37 pm

  25. This great for creating a resource page. I definatley use this information. thanks for sharing.

    Comment by Stephanie, Sunday, August 10, 2008 @ 9:58 pm

  26. Now comes this tool. It should not be a problem to create a muti-column layout.

    Multi-column layout generator

    http://www.pagecolumn.com/

    Comment by hans, Wednesday, September 3, 2008 @ 11:05 pm

Leave a comment

Powered by WP Hashcash

Launch: Pathfinder Newsletter

Categories

Topics

Blogroll

Search

WordPress

Comments about this site: info@pathf.com