Multicolumn Layout

Description

OK, so you want a multicolumn layout. Unfortunately there are no special wiki tags for multicolumn layout but the result can be easily achieved using the [[div]] tags and adding CSS style to it.

There are 2 solutions to the problem depending on what you want:

Multicolumn for continuous text

So you have some piece of text and just want to apply multicolumn layout. This solution does not work in Internet Explorer 6.

You have to use CSS attributes:

{
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    column-count: 3;
    column-gap: 20px;
}

Where the -moz- ones are special mozilla (firefox) extensions while the other follow CSS3 specifications. At the moment it is good to use both.

Code

The code for the example goes here:

[[div style="-moz-column-count: 3;-moz-column-gap: 20px;column-count: 3;column-gap: 20px;"]]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
[[/div]]

How it looks

---

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed leo lectus, accumsan id, aliquam vitae, laoreet id, purus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In hac habitasse platea dictumst. Integer convallis. Nam ultricies. Sed feugiat sapien. Phasellus nulla. Mauris felis diam, hendrerit sed, interdum nec, pellentesque sed, est. Phasellus tellus justo, fringilla id, molestie a, consectetuer nec, enim. Nam placerat, diam id feugiat condimentum, magna nibh interdum dui, non tempor purus tellus in massa. Nunc tellus odio, pretium ut, interdum eu, mollis vitae, magna. Cras dolor. Nullam at erat.

Integer sed ligula non nulla pulvinar ultricies. Phasellus blandit. Vivamus fermentum pharetra nisl. Pellentesque elit. Phasellus laoreet lobortis augue. Sed vehicula. Aliquam erat volutpat. Proin bibendum quam ac pede. Suspendisse id erat. Etiam sodales neque.

Mauris aliquet pellentesque diam. Phasellus ultrices, velit nec ultricies laoreet, lacus magna pulvinar eros, vitae iaculis lorem orci volutpat nisl. Nullam sapien orci, placerat sit amet, viverra non, euismod et, nunc. Sed libero. Aenean laoreet, quam eget aliquet luctus, arcu tortor venenatis lacus, ac tristique massa erat gravida nulla. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Donec a sapien sit amet elit mattis auctor. Morbi magna nunc, pellentesque sit amet, sollicitudin non, varius eget, massa. Donec tempus massa dapibus eros commodo elementum. Suspendisse rutrum augue. Curabitur tellus. Duis dui.

---

As you see the columns are nicely balanced.

Manual column breaking

This solution uses the float attribute to make columns. Use this if you want e.g. to put some text into the left column and some distinct content into the right one. Columns are not auto-balanced.

Code

[[div style="float:left; width: 45%; padding: 0 5% 0 0"]]
Integer sed...
[[/div]]
[[div style="float:left; width: 45%; padding: 0 0 0 5%"]]
Integer sed...
[[/div]]
~~~~~~

The ~~~~~ line simply clears the floats, i.e. makes the following elements appear below the columns. Sometimes it is not required.

How it looks

Integer sed ligula non nulla pulvinar ultricies. Phasellus blandit. Vivamus fermentum pharetra nisl. Pellentesque elit. Phasellus laoreet lobortis augue. Sed vehicula. Aliquam erat volutpat. Proin bibendum quam ac pede. Suspendisse id erat. Etiam sodales neque.

Integer sed ligula non nulla pulvinar ultricies. Phasellus blandit. Vivamus fermentum pharetra nisl. Pellentesque elit. Phasellus laoreet lobortis augue. Sed vehicula. Aliquam erat volutpat. Proin bibendum quam ac pede. Suspendisse id erat. Etiam sodales neque.

Rate this solution

If you think this solution is useful — rate it up! Or dump it otherwise.

Comments

Use % for all margins & padding

pieterh 1162371859|%e %b %Y, %H:%M %Z|agohover

Don't use em's or px's since it'll make your layouts change depending on the font size.

MeMeMe 1170655806|%e %b %Y, %H:%M %Z|agohover

The first set of columns don't work in my browser (Opera 9 on Windows XP SP2)

Re:

Phil Chett 1189810925|%e %b %Y, %H:%M %Z|agohover

[[div style="-moz-column-count: 3;-moz-column-gap: 20px;column-count: 3;column-gap: 20px;"]]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
[[/div]]

Does not work for ie7.
Firefox works ok, BUT, if you are using drop down lists in nav side, it may (not tested on all themes) render drop down inoperable.

does Image clear flaot work?

achille 1198835470|%e %b %Y, %H:%M %Z|agohover

"The ~~~~~ line simply clears the floats, i.e. makes the following elements appear below the columns. Sometimes it is not required."

Does the ~~~~~ line clear the float work for image, too?

Thanks, in advance Phill.

Regards

Achille

By the way

achille 1198835873|%e %b %Y, %H:%M %Z|agohover

Excuse me Phil,
again, where is the ~ on the keybord?

Have a happy New Year.

Achille

Re: By the way

leiger40 1200825585|%e %b %Y, %H:%M %Z|agohover

~ is below the "esc" key, to the left of the "1" key, and above the "tab" key. I am assuming that your keyboard has that key.

To write it, you must do exactly as if you were writing a capital letter, or a symbol above a number eg. $, %, ^, &. That is, you need to hold the "shift" key down when you press it.

vertical line?

Zap85 1215691396|%e %b %Y, %H:%M %Z|agohover

Is it possible to insert in some way a vertical line between the columns?

No continuous columns in Safari

cluelass 1218405180|%e %b %Y, %H:%M %Z|agohover

The first example (continuous columns) does not work in Safari 3.1.2 on Mac OS 10.5.4. The second one, using float, works. That is a nice alternative to tables, especially for using in live templates.