Examples » Multicolumn CSS-based design

This example demonstrates Col plugin.

Column 1 of 4. Column 1 of 4. Column 1 of 4. Column 1 of 4. Column 1 of 4.

Column 2 of 4. Column 2 of 4. Column 2 of 4. Column 2 of 4. Column 2 of 4.

Column 3 of 4. Column 3 of 4. Column 3 of 4. Column 3 of 4. Column 3 of 4.

Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4.

Column 1 of 4. Column 1 of 4. Column 1 of 4. Column 1 of 4. Column 1 of 4.

Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4.

Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4.

Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4.

Column 1 of 4. Column 1 of 4. Column 1 of 4. Column 1 of 4. Column 1 of 4.

Column 2,3 of 4. Column 2,3 of 4. Column 2,3 of 4. Column 2,3 of 4. Column 2,3 of 4. Column 2,3 of 4. Column 2,3 of 4. Column 2,3 of 4. Column 2,3 of 4.

Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4.

Column 1 of 4. Column 1 of 4. Column 1 of 4. Column 1 of 4. Column 1 of 4.

Column 2 of 4. Column 2 of 4. Column 2 of 4. Column 2 of 4. Column 2 of 4.

Column 3,4 of 4. Column 3,4 of 4. Column 3,4 of 4. Column 3,4 of 4. Column 3,4 of 4. Column 3,4 of 4. Column 3,4 of 4. Column 3,4 of 4. Column 3,4 of 4.

Column 1,2 of 4. Column 1,2 of 4. Column 1,2 of 4. Column 1,2 of 4. Column 1,2 of 4. Column 1,2 of 4. Column 1,2 of 4. Column 1,2 of 4. Column 1,2 of 4.

Column 3 of 4. Column 3 of 4. Column 3 of 4. Column 3 of 4. Column 3 of 4.

Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4.

Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4.

Column 15 of 3. Column 15 of 3. Column 15 of 3. Column 15 of 3. Column 15 of 3.

Column 25 of 3. Column 25 of 3. Column 25 of 3. Column 25 of 3. Column 25 of 3.

Column 1,2 of 3. Column 1,2 of 3. Column 1,2 of 3. Column 1,2 of 3. Column 1,2 of 3.

Column 3 of 3. Column 3 of 3. Column 3 of 3. Column 3 of 3. Column 3 of 3.

Column 1 of 3. Column 1 of 3. Column 1 of 3. Column 1 of 3. Column 1 of 3. Column 1 of 3. Column 1 of 3. Column 1 of 3. Column 1 of 3. Column 1 of 3.

Column 2,3 of 3. Column 2,3 of 3. Column 2,3 of 3. Column 2,3 of 3. Column 2,3 of 3.

Column 1 of 2. Column 1 of 2. Column 1 of 2. Column 1 of 2. Column 1 of 2.

Column 2 of 2. Column 2 of 2. Column 2 of 2. Column 2 of 2. Column 2 of 2.

Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4. Column 4 of 4.

Plugin col v.1.0.0 | Inc v.1.0.0 | Settings: example,col | ob is enabled | Executed in 0.07 s. | Hide source
<?php define('INC','example,col'); include_once '../inc/inc.php';
$example_plugin = 'col';

$title = 'Multicolumn CSS-based design';

inc();?>

<p>This example demonstrates Col plugin.</p>

<?=col(1,4)?>
<p style="background-color:yellow;">Column 1 of 4. Column 1 of 4.
Column 1 of 4. Column 1 of 4. Column 1 of 4.</p>
<?=col(2,4)?>
<p style="background-color:yellow;">Column 2 of 4. Column 2 of 4.
Column 2 of 4. Column 2 of 4. Column 2 of 4.</p>
<?=col(3,4)?>
<p style="background-color:yellow;">Column 3 of 4. Column 3 of 4.
Column 3 of 4. Column 3 of 4. Column 3 of 4.</p>
<?=col(4,4)?>
<p style="background-color:yellow;">Column 4 of 4. Column 4 of 4.
Column 4 of 4. Column 4 of 4. Column 4 of 4.</p>
<?=col_end()?>

<?=col(1,4)?>
<p style="background-color:yellow;">Column 1 of 4. Column 1 of 4.
Column 1 of 4. Column 1 of 4. Column 1 of 4.</p>
<?=col(234,4)?>
<p style="background-color:yellow;">Column 2,3,4 of 4. Column 2,3,4 of 4.
Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4.
Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4.
Column 2,3,4 of 4. Column 2,3,4 of 4. Column 2,3,4 of 4.</p>
<?=col_end()?>

<?=col(123,4)?>
<p  style="background-color:yellow;">Column 1,2,3 of 4. Column 1,2,3 of 4.
Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4.
Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4.
Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4.</p>
<?=col(4,4)?>
<p style="background-color:yellow;">Column 4 of 4. Column 4 of 4.
Column 4 of 4. Column 4 of 4. Column 4 of 4.</p>
<?=col_end()?>

<?=col(1,4)?>
<p style="background-color:yellow;">Column 1 of 4. Column 1 of 4.
Column 1 of 4. Column 1 of 4. Column 1 of 4.</p>
<?=col(23,4)?>
<p style="background-color:yellow;">Column 2,3 of 4. Column 2,3 of 4.
Column 2,3 of 4. Column 2,3 of 4. Column 2,3 of 4. Column 2,3 of 4.
Column 2,3 of 4. Column 2,3 of 4. Column 2,3 of 4.</p>
<?=col(4,4)?>
<p style="background-color:yellow;">Column 4 of 4. Column 4 of 4.
Column 4 of 4. Column 4 of 4. Column 4 of 4.</p>
<?=col_end()?>

<?=col(1,4)?>
<p style="background-color:yellow;">Column 1 of 4. Column 1 of 4.
Column 1 of 4. Column 1 of 4. Column 1 of 4.</p>
<?=col(2,4)?>
<p style="background-color:yellow;">Column 2 of 4. Column 2 of 4.
Column 2 of 4. Column 2 of 4. Column 2 of 4.</p>
<?=col(34,4)?>
<p style="background-color:yellow;">Column 3,4 of 4. Column 3,4 of 4.
Column 3,4 of 4. Column 3,4 of 4. Column 3,4 of 4. Column 3,4 of 4.
Column 3,4 of 4. Column 3,4 of 4. Column 3,4 of 4.</p>
<?=col_end()?>

<?=col(12,4)?>
<p style="background-color:yellow;">Column 1,2 of 4. Column 1,2 of 4.
Column 1,2 of 4. Column 1,2 of 4. Column 1,2 of 4. Column 1,2 of 4.
Column 1,2 of 4. Column 1,2 of 4. Column 1,2 of 4.</p>
<?=col(3,4)?>
<p style="background-color:yellow;">Column 3 of 4. Column 3 of 4.
Column 3 of 4. Column 3 of 4. Column 3 of 4.</p>
<?=col(4,4)?>
<p style="background-color:yellow;">Column 4 of 4. Column 4 of 4.
Column 4 of 4. Column 4 of 4. Column 4 of 4.</p>
<?=col_end()?>

<?=col(123,4)?>

<p>Column 1,2,3 of 4. Column 1,2,3 of 4. Column 1,2,3 of 4.
Column 1,2,3 of 4.</p>

<?=col(15,3)?>
<p style="background-color:yellow;">Column 15 of 3. Column 15 of 3.
Column 15 of 3. Column 15 of 3. Column 15 of 3.</p>
<?=col(25,3)?>
<p style="background-color:yellow;">Column 25 of 3. Column 25 of 3.
Column 25 of 3. Column 25 of 3. Column 25 of 3.</p>
<?=col_end()?>

<?=col(12,3)?>
<p style="background-color:yellow;">Column 1,2 of 3. Column 1,2 of 3.
Column 1,2 of 3. Column 1,2 of 3. Column 1,2 of 3.</p>
<?=col(3,3)?>
<p style="background-color:yellow;">Column 3 of 3. Column 3 of 3.
Column 3 of 3. Column 3 of 3. Column 3 of 3.</p>
<?=col_end()?>

<?=col(1,3)?>
<p style="background-color:yellow;">Column 1 of 3. Column 1 of 3.
Column 1 of 3. Column 1 of 3. Column 1 of 3.
Column 1 of 3. Column 1 of 3. Column 1 of 3.
Column 1 of 3. Column 1 of 3.</p>
<?=col(23,3)?>
<p>Column 2,3 of 3. Column 2,3 of 3.
Column 2,3 of 3. Column 2,3 of 3. Column 2,3 of 3.</p>

<?=col(1,2)?>
<p style="background-color:yellow;">Column 1 of 2. Column 1 of 2.
Column 1 of 2. Column 1 of 2. Column 1 of 2.</p>
<?=col(2,2)?>
<p style="background-color:yellow;">Column 2 of 2. Column 2 of 2.
Column 2 of 2. Column 2 of 2. Column 2 of 2.</p>
<?=col_end()?>

<?=col_end()?>

<?=col(4,4)?>
<p style="background-color:yellow;">Column 4 of 4. Column 4 of 4.
Column 4 of 4. Column 4 of 4. Column 4 of 4.
Column 4 of 4. Column 4 of 4. Column 4 of 4.
Column 4 of 4. Column 4 of 4. Column 4 of 4.
Column 4 of 4. Column 4 of 4. Column 4 of 4.
Column 4 of 4. Column 4 of 4. Column 4 of 4.
Column 4 of 4. Column 4 of 4. Column 4 of 4.</p>
<?=col_end()?>