Fullscreen
Loading...
 
[Show/Hide Left Column]
[Show/Hide Right Column]

Print
  • World
    • No language is assigned to this page.

Floated box demo



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.

wiki syntax:
Cool Web layout method
1990s HTML tables
Today CSS (divs, etc.)


FANCYTABLE plugin:
Column 1 Column 2
Row 1 Column 1 Row 1 Column 2
Row 2 Column 1 Row 2 Column 2
Row 3 Column 1 Row 3 Column 2


But for correct semantic layout of general page content, tables aren't appropriate and should be avoided, which is where this floated box method works well.

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. Clearfix ensures that the background or border will go down around all the floated divs, and that the content of this div won't overlap or be overlapped by the content below it.

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=random_pages)/}{MODULE(module=random_pages)/}{DIV}


Three columns



produced by

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


and

Four columns



produced by

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


Boxes can have any content, not just a module, like this (Sorry but this part of the demo is temporarily out of order in Tiki 4.0. It is fixed in the code for TIki 4.1. In the meantime, for the non-module columns to display side by side, their div class="box" must have a 'style=float:left !important" rule added inline.) :

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. Het heeft niet alleen vijf eeuwen overleefd maar is ook, vrijwel onveranderd, overgenomen in elektronische letterzetting. Het is in de jaren '60 populair geworden met de introductie van Letraset vellen met Lorem Ipsum passages en meer recentelijk door desktop publishing software zoals Aldus PageMaker die versies van Lorem Ipsum bevatten.
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, quando uma misturou os caracteres de um texto para criar um espécime de livro. Este texto não só sobreviveu 5 séculos, mas também o salto para a tipografia electrónica, mantendo-se essencialmente inalterada. Foi popularizada nos anos 60 com a disponibilização das folhas de Letraset, que continham passagens com Lorem Ipsum, e mais recentemente com os programas de publicação como o Aldus PageMaker que incluem versões do Lorem Ipsum.


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


Lorem Ipsum

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.



produced by

{DIV(class="halffloat clearfix")}{DIV(class="box")}!!Lorem Ipsum
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=random_pages)/}{DIV}


Bootstrap from Tiki13


From Tiki13 we use the responsive Twitter Bootstrap design framework to determine the layout and design of Tiki.

Then a similar effect will be made with a different method.
As in Bootstrap the full width of a div is a part of 12 gutters, a number of 1 to 12 elements can be put besides each other, each in a div, using the column classes of Bootstrap. The column classes determine the relative with of the elements and the "breakpoints" based on device width (@media queries), when the elements get vertically stacked (mobile device, tablet, smartphone or shrinking the browser width).

Some examples:

Please mind, that adding the width parts of the class name (the number) must give 12 when added (6+6 or 4+4+4 or 2+2+2+6 or 3+4+3+2 etc.)

The {DIV(class=row)} wraps together the 12-gutter side by side elements and "clearfixes" the content to the following part of the page (or custommodule or template, if used with html -> div class="row").

"content" refers to arbitrary elements like text, modules, wikiplugins ...

3 Elements equal width (three times -4), 'side by side' - switching to 'vertically stacked' at lower than medium (-md-) with:
{DIV(class=row)}
{DIV(class=col-md-4)}content{DIV}
{DIV(class=col-md-4)}content{DIV}
{DIV(class=col-md-4)}content{DIV}
{DIV}


2 Elements equal width (twice -6), 'side by side' - switching to 'vertically stacked' at lower than large (-lg-) with:
{DIV(class=row)}
{DIV(class=col-lg-6)}content{DIV}
{DIV(class=col-lg-6)}content{DIV}
{DIV}


4 Elements different width, 'side by side' - switching to 'vertically stacked' at lower than small (-sm-) with:
{DIV(class=row)}
{DIV(class=col-sm-3)}content{DIV}
{DIV(class=col-sm-3)}content{DIV}
{DIV(class=col-sm-2)}content{DIV}
{DIV(class=col-sm-4)}content{DIV}
{DIV}


The Bootstrap grid layout can work as well in Tiki 12 and earlier Tiki versions if the grid CSS rules are gotten from bootstrap.css (available at http://getbootsrap.com) and put in a theme stylesheet or separate CSS file that's imported by the theme stylesheet. There's no need to use other files such as Javascript files simply to have the grid layout.

In Tiki 12, you may also be able to use a Tiki 13 (or "trunk" development version of Tiki, prior to the release of Tiki 13) version of templates/layouts/.../layout_view.tpl, to have the grid rules applied to the module zones and left, right and main columns of the page.


Subscribe to Tiki Newsletters! [toggle]

Delivered fresh to your email inbox!
Newsletter subscribe icon
Don't miss major announcements and other big news!
Contribute to Tiki

Theme: Fivealive [toggle]

Shoutbox

luci, 09:13 GMT, Mon 09 of Dec, 2013: logo updated with ®. please do ctrl+F5 refresh...
chibaguy, 06:31 GMT, Thu 16 of May, 2013: Veronica, that star has been eclipsed many times, with Tiki 11.o now soon to rise. ;-)
veronicamarsh, 08:33 GMT, Sun 12 of May, 2013: tikiwiki 2.0 is the star of this weekend. Just follow as we add it to SM dev.
chibaguy, 02:57 GMT, Thu 04 of Oct, 2012: This is a late reply, but, for the record, the Milkyway theme (following the original design) doesn't have a search form in the top bar. You can put one at the top of a side column, etc. instead.
andi6803, 12:20 GMT, Tue 18 of Oct, 2011: I use tiki 6v4 with the Milkyway theme. But it's not possible to switch on the search bar at the top bar. With other themes it works.