Hi Graeme Just to be clarify, the CSS column-count property is really designed for situations where you want text to flow between columns. In your situation, where the content of the columns is entirely separate, then it's more appropriate to use floats, as you have done, or even tables.
Best wishes Jeremy. On Mon, Sep 7, 2015 at 3:30 PM, Graeme Henson <[email protected]> wrote: > > > On Monday, September 7, 2015 at 5:59:07 AM UTC-4, Ton Gerner wrote: >> >> Hi Graeme, >> >> >>> I tried throwing together this code with Transcluded tiddlers: >>> >>> /*COLUMNS*/ >>>> >>>> .twocolumns { display:block; >>>> >>>> column-count:2; >>>> >>>> -moz-column-count:2; >>>> >>>> -webkit-column-count:2;} >>>> >>>> >>>>> .threecolumns { display:block; >>>> >>>> column-count:3; >>>> >>>> -moz-column-count:3; >>>> >>>> -webkit-column-count:3;} >>>> >>>> >>>>> .fourcolumns { display:block; >>>> >>>> column-count:4; >>>> >>>> -moz-column-count:4; >>>> >>>> -webkit-column-count:4;} >>>> >>>> >>>>> .fivecolumns { display:block; >>>> >>>> column-count:5; >>>> >>>> -moz-column-count:5; >>>> >>>> -webkit-column-count:5;} >>>> >>>> >> In case of text in a tiddler use: >> >> @@.threecolumns >> All text to be displayed in three columns >> @@ >> >> In case of transclusion use: >> >> @@.threecolumns >> <div> >> >> {{Tiddler to be transcluded}} >> >> </div> >> @@ >> > > > I tried doing something like that earlier, but it wasn't giving me the > results I was looking for. I was able to cobble something together through > trial and error that more or less achieves what I was looking for, but the > code looks jacked up and it will likely break on different screens: > > > https://drive.google.com/file/d/0B8oiLzPSpgM6T0laa0hRaFY4LTA/view?usp=sharing > > My StyleSheet looks like this: > > /* custom styles for parallel columns. Classes cola and colb */ > > .ha { > display:inline-block; > width:30%; > overflow:auto; > } > > .hb { > float:right; > width:40%; > } > > .hc { > float:right; > width:30%; > } > > .cola { > display:inline-block; > width:30%; > overflow:auto; > } > > .colb { > float:right; > width:40%; > } > > .colc { > float:right; > width:30%; > } > > .clearfix { > overflow: auto; > } > > and my page code looks like this: > > @@.ha > !!Helpful Links > @@ > > @@.hc > !!Department & Office Info > @@ > > @@.hb > !!Labeling Process > @@ > > > > @@.cola > > First column List goes in here > > @@ > > > @@.colc > > Third column List goes here > > @@ > > @@.colb > > Middle column List goes here > > @@ > > > There were a few problems when I tried transcluding multiple tiddlers, but > mostly it would just dump them all in one big list and not distribute > anything across columns. I had to break apart the headings from the Lists > themselves because the List and Heading wouldn't play nice together and it > would put the Heading in one column and then move the list to the next > column. I had to do column .cola as a display:inline-block because if I > tried to do float:left on it, all the lists would overflow outside of the > tiddler box/container/thing (that overflow:auto part didn't seem to do > anything). So everything I have in there just happened to work on my > screen, but I know it won't work on other screens and ideally I'd like to > do transclusion if that's more effecient, but I just don't know enough of > CSS coding to know how to go about that. At some point even I'd like to > change out alot of these text links and make it a bit more visually > appealing with small buttons on a grid (while still maintaining these same > column groupings), but that's a bit further down the road. > > -- > You received this message because you are subscribed to the Google Groups > "TiddlyWiki" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/tiddlywiki. > To view this discussion on the web visit > https://groups.google.com/d/msgid/tiddlywiki/f78d2828-27c6-4a3e-8134-f98a4a96ed9b%40googlegroups.com > <https://groups.google.com/d/msgid/tiddlywiki/f78d2828-27c6-4a3e-8134-f98a4a96ed9b%40googlegroups.com?utm_medium=email&utm_source=footer> > . > > For more options, visit https://groups.google.com/d/optout. > -- Jeremy Ruston mailto:[email protected] -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/tiddlywiki. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/CAPKKYJYM4VJronURphktOvG7D1R7EutjQSfuj8uXLFwVydxROQ%40mail.gmail.com. For more options, visit https://groups.google.com/d/optout.
