DokuWiki

It's better when it's simple

User Tools

Site Tools


Sidebar

Translations of this page?:

Learn about DokuWiki

Advanced Use

Corporate Use

Our Community


Follow us on Facebook, Twitter and other social networks.

Our Privacy Policy

tips:simple_columns

Simple Columns

Description

Implementation of columns without plugins.1)

What should be done

Add this code to <dokuwiki>/conf/entities.conf:

<col2>	<div style="float:left;width:48%;">
<sep2>	</div><div style="float:left;width:3%;">&nbsp;</div><div style="float:left;width:48%;">
<col3>	<div style="float:left;width:31%;">
<sep3>	</div><div style="float:left;width:3%;">&nbsp;</div><div style="float:left;width:31%;">
<col4>	<div style="float:left;width:22%;">
<sep4>	</div><div style="float:left;width:4%;">&nbsp;</div><div style="float:left;width:22%;">
</col>	</div><div style="clear:both"></div>

( <sep*> — means separator )

Usage

Example 1 (Text divided by 4 columns):

<col4>
...1st column data
<sep4>
...2nd column data
<sep4>
...3rd column data
<sep4>
...4th column data
</col>

Example 2 (Text divided by 2 columns):

<col2>
...1st column data
<sep2>
...2nd column data
</col>

Example 3 (Text divided by 3 columns):

<col3>
...1st column data
<sep3>
...2nd column data
<sep3>
...3rd column data
</col>

Examples 4 (Columns of different width):

:!: The main thing is that the amount of % does not exceed 100.

<col3>
...medium width of column ~33%
<sep4>
...small column ~25%
<sep3>
...medium width of column ~33%
</col>

<col4>
...small column ~25%
<sep4>
...small column ~25%
<sep2>
...the biggest width of column ~50%
</col>

Alternate with AUTO-BALANCED COLUMNS

Added on 10/04/18 by leneheylenehey

:

The above tip is great and I really like using this mechanism rather than trying to make someone's plugin work for you. But there is a much easier HTML mechanism that will auto-balance your columns. I tested this and it works GREAT!

Add the following to entities.conf in your /conf directory.

<col2>  <div style="column-count: 2;">
<col3>  <div style="column-count: 3;">
</col>  </div>

Now simply put <col2> in front of the block of text you want split into two columns, or <col3> in front of the block of text you want to split into three columns, and then </col> at the end of that block of text.

1)
Implementation of columns with plugins take a look at Column Plugin and Wrap Plugin
tips/simple_columns.txt · Last modified: 2018-10-04 19:59 by lenehey