Use % for all margins & padding
Don't use em's or px's since it'll make your layouts change depending on the font size.
Multicolumn Layout / Discussion
Forum
» Hidden / Per page discussions
» Multicolumn Layout
This is the discussion related to the wiki page Multicolumn Layout.
The first set of columns don't work in my browser (Opera 9 on Windows XP SP2)
[[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.
"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
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
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.
How does one do multiple columns as part of an image caption?
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).
Unfold
How does one do multiple columns as part of an image caption? by 
David Lilienfeld, 31 May 2010 20:56
Apparently, one can't nest divs,
Yes you can. You can't nest modules but you can nest divs.
Rob Elliott - Strathpeffer, Scotland - Wikidot first line support & community admin team.
Unfold
Re: How does one do multiple columns as part of an image caption? by 
RobElliott, 31 May 2010 21:09
so I don't know how to set up a multiple column caption
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.
Unfold
Re: How does one do multiple columns as part of an image caption? by RobElliott, 31 May 2010 21:55
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…
Unfold
Re: Does this work with more recent version of Internet Explorer? by 
GoVegan, 10 May 2011 07:58
Unfortunately, there's no easy way to achieve this in IE.
Internet Explorer does not support any of the CSS3 multi-column layout properties.1
Nor does CSS3 Pie add support for multiple columns.
Footnotes
Unfold
Re: Does this work with more recent version of Internet Explorer? by 
bcammo, 10 May 2011 08:20
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?
Unfold
Re: Does this work with more recent version of Internet Explorer? by 
wonbok, 10 May 2011 13:48
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:
/* MULTI-COLUMNS
============================== */
/*5 column layout*/
div.column1, div.column2, div.column3, div.column4, div.column5 {
float: left;
margin-left: 0;
padding: 0 10px;
position:relative;
width:150px;
}2) Then in the page itself you use divs with the class you specified in the CSS:
[[div class="column1" style="float:left; width:250px;"]]
[[image /images/stairs.jpg]]
[[/div]]
[[div class="column2" style="float:left; width:250px;"]]
[[image /images/exterior.jpg]]
[[/div]]
[[div class="column3" style="width:250px;"]]
[[image /images/ceiling.jpg]]
[[/div]]
[[div style="clear:both;"]]
[[/div]]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.
Unfold
Re: Does this work with more recent version of Internet Explorer? by RobElliott, 10 May 2011 14:57
However the text will not flow from one column to another, you would need to enter it into each div.
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.
Unfold
Re: Does this work with more recent version of Internet Explorer? by wonbok, 10 May 2011 21:21
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.
Unfold
Re: Does this work with more recent version of Internet Explorer? by RobElliott, 11 May 2011 02:47
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
Unfold
Re: Does this work with more recent version of Internet Explorer? by 
leiger, 11 May 2011 03:43
I have inserted n the page the code ( copied from the translations stats) for all 3 used specifications for multi column layout.
[[div style="-moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; column-count: 3; column-gap: 20px"]]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 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 ?
/forum/t-428/multicolumn-layout#post-