Introduction

In days gone by, HTML tables were used to lay out web page content, but with the invention of cascading style sheets, divs have replaced tables as the preferred containers of content on a web page. To encourage Tiki site authors to use up-to-date layout methods, here is some syntax that enables easy layout of two, three, or four columns on a wiki page.

Of course Tiki's wiki syntax for tables can still be used where it's appropriate: for tabular data.

Also for L&F custom code

Site admins, these same CSS classes can be used in Look and Feel custom code areas - site header, top bar, center column heading, and bottom bar - if you want to have two or more columns of content in any of those areas.

Procedure

Each place where columns are wanted, add a div with the appropriate class — halffloat, thirdfloat, or quarterfloat, depending on if there are to be two, three, or four columns, and the class clearfix. The clearfix class isn't strictly necessary unless you want to add a background color or border to the halffloat, etc. class. Clearfix ensures that the background or border will go down around all the floated divs.

If a div is used instead of a module within the halffloat, etc. it needs to have the class box. See example below. Combinations of non-module divs and modules are also ok.

Examples

Two columns

is produced by:

{DIV(class="halffloat clearfix")}
{MODULE(module=registration_info)/}{MODULE(module=registration_info)/}{DIV}

Three columns

produced by

{DIV(class="thirdfloat")}
{MODULE(module=registration_info)/}{MODULE(module=registration_info)/}{MODULE(module=registration_info)/}{DIV}

and

Four columns

produced by

{DIV(class="quarterfloat clearfix")}{MODULE(module=registration_info)/}{MODULE(module=registration_info)/}{MODULE(module=registration_info)/}{MODULE(module=registration_info)/}{DIV}

Boxes can have any content, not just a module, like this:

produced by:

{DIV(class="halffloat clearfix")}{DIV(class="box")}Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. . . .{DIV}{DIV(class="box")}Lorem Ipsum é um texto modelo da indústria tipográfica e de impressão. O Lorem Ipsum tem vindo a ser o texto padrão usado por estas indústrias desde o ano de 1500. . . .{DIV}{DIV}

Mix of modules and other divs

produced by

{DIV(class="halffloat clearfix")}{DIV(class="box")}Lorem Ipsum is slechts een proeftekst uit het drukkerij- en zetterijwezen. Lorem Ipsum is de standaard proeftekst in deze bedrijfstak sinds de 16e eeuw, toen een onbekende drukker een zethaak met letters nam en ze door elkaar husselde om een font-catalogus te maken.{DIV}{MODULE(module=registration_info)/}{DIV}