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 - 9.
You have to use CSS attributes:
{ -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px; }
Where the -moz- ones are special mozilla (firefox) extensions , -webkit- ones are special Apple, Google and Nokia (Safari, Opera) extensions while the other follow CSS3 specifications. At the moment it is good to use all three. Only Internet Explorer (version 9) is not(yet) using one of these CSS3 specifications. IE users have to wait for IE(10):
Code
The code for the example goes here:
Note (Dec 17 2012) : CSS module added to override the browser default paragraph top margin.
[[div class="fixmargin" style="-moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px"]]
Lorem ipsum dolor sit amet, consectetuer adipiscing elit...
[[/div]]
[[module css]]
.fixmargin p {
margin-top: 0;
}
[[/module]]
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.
Thanks to tsangk for this great snippet: conditional-blocks
text above inserted with:
[[include :snippets:if START |unique=1|type=equal|var1=%%name%%|var2=conditional-blocks]]
**##red|Thanks to tsangk for this great snippet:##** [[[code:conditional-blocks]]]
[[include :snippets:if END]]
Other snippets posted by michal frackowiak
MyBlogLog recent visitors - 06 Jun 2021 04:03
Include Any Page - 06 Jun 2021 03:20
Babelfish Translation - 06 Jun 2021 03:14
Collapsible Text Block - 02 Dec 2020 10:24
Todo List - 18 Aug 2014 15:28
Zoho Writer - 16 Feb 2012 01:57
Zoho Sheet - 16 Feb 2012 01:56
Zoho Show - 16 Feb 2012 01:55
Zoho Polls - 16 Feb 2012 01:53
WoW Tooltips - 16 Feb 2012 01:52
Widgetbox Panel - 16 Feb 2012 01:52
Video from Revver - 16 Feb 2012 01:50
Tabs - 16 Feb 2012 01:45
Standalone Page Buttons - 16 Feb 2012 01:44
Social Bookmarking - 16 Feb 2012 01:42
Simple Gallery - 16 Feb 2012 01:41
Remember The Milk Todo - 16 Feb 2012 01:39
Recent Changes (mini) - 16 Feb 2012 01:36
Rating Summary - 16 Feb 2012 01:35
Quimble Poll - 16 Feb 2012 01:33
Quikmaps Maps - 16 Feb 2012 01:33
Photobucket Widget - 16 Feb 2012 01:29
Page Previews (Snap.com) - 16 Feb 2012 01:29
Pabpixies Gadgets - 16 Feb 2012 01:28
Meebo me - 16 Feb 2012 01:20
Layout With Tables - 16 Feb 2012 01:19
Instacalc - 16 Feb 2012 01:12
Import the Digg Feed - 16 Feb 2012 01:11
Import a News Feed - 16 Feb 2012 01:10
Google Gadgets - 16 Feb 2012 01:05
Gabbly chat - 16 Feb 2012 01:02
Forum Summary for the Front Page - 16 Feb 2012 01:02
Footnotes - 16 Feb 2012 01:01
Foldable List - 16 Feb 2012 01:01
Flickr Images By Tags - 16 Feb 2012 01:00
Feedburner - 15 Feb 2012 00:53
Extra Side Bar - 15 Feb 2012 00:51
Embed Code From Other Services - 15 Feb 2012 00:50
EditGrid Spreadsheets - 15 Feb 2012 00:49
Cornify - 15 Feb 2012 00:39
Compact Feed Display - 15 Feb 2012 00:35
Center Video - 15 Feb 2012 00:28
Bibliography/Footnotes/Comments Listed in TOC - 15 Feb 2012 00:26
Automatic Sitemap - 15 Feb 2012 00:25
Alexa traffic ratings - 15 Feb 2012 00:23
3d tagcloud - 15 Feb 2012 00:22
Rate this solution
If you think this solution is useful — rate it up!
I should've posted my stats. I'm using the latest Google Chrome update with Windows Vista home edition. Thanks for posting the fix; I tested it with my listpages module-using list, and it came out great.
Everything lines up perfectly in this example for me. I'm using Firefox on a WinXP machine at the moment. The 3 columns in the "How It Looks" section of the continuous example and the 2 columns in the manual columns example are aligned at the top as I would expect.
Which mode are you having trouble with and can you point us to an example (or post a screen shot)?
Community Admin
Weird. I'm seeing it now on another PC with Firefox and XP Pro. I'll have to look at it again when I get home later.
If you add p {margin-top: 0;} to your CSS, it will remove the margin at the top of the first column.
Community Admin
I just updated the example here to include a CSS module to remove the paragraph top margin.
Community Admin
I found this totally by accident and it's exactly what I was needing for a list; combined with a tag listing, it came out perfect. Except for the random extra hard return at the start of the first column (which makes them not line up exactly).
Any thoughts on removing that hard return? It's visible in the textual example above.
Important question: which browser ??
- on IE 9 and older) there is no multi column possible till today… :)
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
I have inserted n the page the code ( copied from the translations stats) for all 3 used specifications for multi column layout.
Service is my success. My webtips:www.blender.org (Open source), Wikidot-Handbook.
Sie können fragen und mitwirken in der deutschsprachigen » User-Gemeinschaft für WikidotNutzer oder
im deutschen » Wikidot Handbuch ?
This code works with FireFox, but does not work with Internet Explorer 9. Is there a way to make multiple column work in IE 9?
Maybe you can do it with Pie, but I'm unfamiliar with how pie works…
Unfortunately, there's no easy way to achieve this in IE.
Nor does CSS3 Pie add support for multiple columns.
BMC Creative | RoaringApps | @brycecammo
Then how do you achieve multicolumn for Internet Explorer? I've seen multicolumns using IE. Can you incorporate that other mechanism, whatever it is, into the CSS?
If you look at one of my sites at http://www.rfpg.org using any browser (including IE) the 3 images at the bottom of the start page use a multi-column layout: I had specified a 5 column layout in the CSS but only used 3 on that page which is why I changed the width in each div.
1) The CSS was as follows:
2) Then in the page itself you use divs with the class you specified in the CSS:
I used images in the columns but of course you can also use text. However the text will not flow from one column to another, you would need to enter it into each div.
There is currently no IE equivalent to the -moz-column-count rule.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Thanks for the tip, but if text does not flow from one column to another, it will be very impracticable. I wonder why MS hasn't incorporated the multicolumn feature into their browser.
As you get to know more about CSS you wil reaskise that this is always the case: browsers like Firefox, Chrome and Safari are always ahead of IE in terms of implementing modern CSS Those browsers often implement their own vendor-specific rules (-moz is short for Mozilla which is the organisation that developes Firefox) before the rule is formally adopted by W3C, as is the case with column count which is still at CSS3 candidate status: http://www.w3.org/TR/css3-multicol/
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Exactly… most of these things aren't even a finalised by the W3C. CSS3 technically shouldn't be used by anyone yet.
But what CSS3 offers is so awesome, that people want to use it anyway and most browsers implement rules to let them do exactly that. Plus the W3C is usually slow as hell to approve these things anyway.
IE9 provides support for some CSS3 elements, but for the most part it seems Microsoft wants to wait until all this is formalised first. That leads to things not working in IE.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
Apparently, one can't nest divs, so I don't know how to set up a multiple column caption (no lines, so using tables doesn't work, either).
Yes you can. You can't nest modules but you can nest divs.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
If you have a look at the page here, is that the sort the of multi-column thing you are wanting to do? Under each image is a header and also other text. It's done with divs and CSS. So have a look at the page source but you will also need to look at the css for that page which is at http://vineyard.wikidot.com/columns:css
Let me know if you need me to talk you through any of this.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
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.
Is it possible to insert in some way a vertical line between the columns?
Excuse me Phil,
again, where is the ~ on the keybord?
Have a happy New Year.
Achille
~ 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.
~ Leiger - Wikidot Community Admin - Volunteer
Wikidot: Official Documentation | Wikidot Discord server | NEW: Wikiroo, backup tool (in development)
"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