Multicolumn Layout

By michal frackowiakmichal frackowiak

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

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
MyBlogLog recent visitors - 16 Feb 2012 01:25
Meebo me - 16 Feb 2012 01:20
Layout With Tables - 16 Feb 2012 01:19
Instacalc - 16 Feb 2012 01:12
Include Any Page - 16 Feb 2012 01:11
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
Collapsible Text Block - 15 Feb 2012 00:35
Center Video - 15 Feb 2012 00:28
Bibliography/Footnotes/Comments Listed in TOC - 15 Feb 2012 00:26
Babelfish Translation - 15 Feb 2012 00:25
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!

rating: +86+x
Add a New Comment
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License