>> Table of Contents >> Developer's Manual
<< Graphics and photos Index Create tree menus >>

Create multicolumn layouts

General introduction

The Yana Framework provides predefined CSS to create text boxes or pages with 2, 3 or more vertical columns. No programming is required. The required CSS code will be loaded automatically in the "default" skin theme.

Below are some examples for demonstration

How do I create 2 columns?

Source code for the template: 

<div class="multicol2">
    <div class="col_left">
        <h2>Column 1</h2>

        Nulla ultrices lacinia mi. Nulla dapibus, risus vitae imperdiet
        commodo, ipsum ligula lacinia orci, non venenatis metus ligula
        sit amet turpis. Nunc accumsan tempor nulla. Vivamus eleifend,
        s eu feugiat consequat, mi lacus vestibulum velit, eu

ege
        egestas purus nunc ac est. Mauris massa lorem, lacinia non,
        condimentum vel, cursus ac, lectus. Nulla tempor molestie quam.
        Aenean dapibus nisl nonummy quam. Mauris pellentesque ornare
        ante. Integer a urna ultricies neque bibendum dignissim.
        Suspendisse interdum nisl. In rhoncus. Vivamus risus mi, semper
        id, lobortis et, auctor in, nulla. Sed placerat posuere tortor.
        In vitae augue.

    </div>
    <div class="col_right">
        <h2>Column 2</h2>

        Aliquam auctor viverra ligula. Ut nisi felis, condimentum at,
        aliquam eget, tempus id, nisi. Maecenas a libero. Nulla metus
        mi, malesuada sit amet, sagittis bibendum, scelerisque a, purus.
        Nunc ipsum. Sed vel augue pellentesque ligula pharetra pulvinar.
        Class aptent taciti sociosqu ad litora torquent per conubia
        nostra, per inceptos hymenaeos. Nam orci. Donec neque pede,
        iaculis in, pellentesque ac, commodo eget, libero. Sed vel
        magna.

    </div>
    <div class="col_foot">&nbsp;</div>
</div>
Column 1
Nulla ultrices lacinia mi. Nulla dapibus, risus vitae imperdiet commodo, ipsum ligula lacinia orci, non venenatis metus ligula sit amet turpis. Nunc accumsan tempor nulla. Vivamus eleifend, lectus eu feugiat consequat, mi lacus vestibulum velit, eu egestas purus nunc ac est. Mauris massa lorem, lacinia non, condimentum vel, cursus ac, lectus. Nulla tempor molestie quam. Aenean dapibus nisl nonummy quam. Mauris pellentesque ornare ante. Integer a urna ultricies neque bibendum dignissim. Suspendisse interdum nisl. In rhoncus. Vivamus risus mi, semper id, lobortis et, auctor in, nulla. Sed placerat posuere tortor. In vitae augue.
Column 2
Aliquam auctor viverra ligula. Ut nisi felis, condimentum at, aliquam eget, tempus id, nisi. Maecenas a libero. Nulla metus mi, malesuada sit amet, sagittis bibendum, scelerisque a, purus. Nunc ipsum. Sed vel augue pellentesque ligula pharetra pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam orci. Donec neque pede, iaculis in, pellentesque ac, commodo eget, libero. Sed vel magna.
 

How do I create 3 columns?

Source code for the template: 

<div class="multicol3">
    <div class="col_left">
        <h2>Column 1</h2>

        Nulla ultrices lacinia mi. Nulla dapibus, risus vitae imperdiet
        commodo, ipsum ligula lacinia orci, non venenatis metus ligula
        sit amet turpis. Nunc accumsan tempor nulla. Vivamus eleifend,
        s eu feugiat consequat, mi lacus vestibulum velit, eu

ege
        egestas purus nunc ac est. Mauris massa lorem, lacinia non,
        condimentum vel, cursus ac, lectus. Nulla tempor molestie quam.
        Aenean dapibus nisl nonummy quam. Mauris pellentesque ornare
        ante. Integer a urna ultricies neque bibendum dignissim.
        Suspendisse interdum nisl. In rhoncus. Vivamus risus mi, semper
        id, lobortis et, auctor in, nulla. Sed placerat posuere tortor.
        In vitae augue.

    </div>
    <div class="col_center">
        <h2>Column 2</h2>

        Aliquam auctor viverra ligula. Ut nisi felis, condimentum at,
        aliquam eget, tempus id, nisi. Maecenas a libero. Nulla metus
        mi, malesuada sit amet, sagittis bibendum, scelerisque a, purus.
        Nunc ipsum. Sed vel augue pellentesque ligula pharetra pulvinar.
        Class aptent taciti sociosqu ad litora torquent per conubia
        nostra, per inceptos hymenaeos. Nam orci. Donec neque pede,
        iaculis in, pellentesque ac, commodo eget, libero. Sed vel
        magna.

    </div>
    <div class="col_right">
        <h2>Column 3</h2>

        Morbi eget dolor. Etiam ut velit sollicitudin massa laoreet
        lobortis. ices.

Morbi justo tortor, blandit  Morbi justo
        tortor, blandit sed, euismod at, eleifend nec, tortor. Lorem
        ipsum dolor sit amet, consectetuer adipiscing elit. Etiam eget
        enim. s venenatis volutpat.

Integer ipsum ante, porta eu
        Integer ipsum ante, porta eu, porta vel, euismod in, magna.
        Fusce dolor quam, lacinia eget, rutrum at, lacinia pulvinar,
        risus. Nulla imperdiet, lorem facilisis lacinia suscipit, diam
        mi aliquet dui, at fringilla lectus mauris sit amet ipsum.
        Morbi eget sem quis est congue pulvinar. Vivamus fermentum
        dolor nec nisi convallis posuere. Aliquam eu diam. Ut suscipit,
        nisi quis vehicula ullamcorper, lectus lorem fermentum tellus,
        ut egestas arcu sapien aliquam massa.

    </div>
    <div class="col_foot">&nbsp;</div>
</div>
Column 1
Nulla ultrices lacinia mi. Nulla dapibus, risus vitae imperdiet commodo, ipsum ligula lacinia orci, non venenatis metus ligula sit amet turpis. Nunc accumsan tempor nulla. Vivamus eleifend, lectus eu feugiat consequat, mi lacus vestibulum velit, eu egestas purus nunc ac est. Mauris massa lorem, lacinia non, condimentum vel, cursus ac, lectus. Nulla tempor molestie quam. Aenean dapibus nisl nonummy quam. Mauris pellentesque ornare ante. Integer a urna ultricies neque bibendum dignissim. Suspendisse interdum nisl. In rhoncus. Vivamus risus mi, semper id, lobortis et, auctor in, nulla. Sed placerat posuere tortor. In vitae augue.
Column 2
Aliquam auctor viverra ligula. Ut nisi felis, condimentum at, aliquam eget, tempus id, nisi. Maecenas a libero. Nulla metus mi, malesuada sit amet, sagittis bibendum, scelerisque a, purus. Nunc ipsum. Sed vel augue pellentesque ligula pharetra pulvinar. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Nam orci. Donec neque pede, iaculis in, pellentesque ac, commodo eget, libero. Sed vel magna.
Column 3
Morbi eget dolor. Etiam ut velit sollicitudin massa laoreet lobortis. ices. Morbi justo tortor, blandit Morbi justo tortor, blandit sed, euismod at, eleifend nec, tortor. nsectetuer adipiscing elit. Etiam eget enim. Maecenas v Etiam eget enim. s venenatis volutpat. Integer ipsum ante, porta eu Integer ipsum ante, porta eu, porta vel, euismod in, magna. Fusce dolor quam, lacinia eget, rutrum at, lacinia pulvinar, risus. Nulla imperdiet, lorem facilisis lacinia suscipit, diam mi aliquet dui, at fringilla lectus mauris sit amet ipsum. Morbi eget sem quis est congue pulvinar. Vivamus fermentum dolor nec nisi convallis posuere. Aliquam eu diam. Ut suscipit, nisi quis vehicula ullamcorper, lectus lorem fermentum tellus, ut egestas arcu sapien aliquam massa.
 

How do I create 4 or more columns?

It is possible to have nested multicolumn boxes. The following example demonstrates how two 2-column layouts are nested to create a 4-column layout.

Source code for the template: 

<div class="multicol2">
    <div class="col_left">
        <div class="multicol2">
            <div class="col_left">
                <h2>Column 1</h2>

                Vestibulum tempor commodo mi. Integer sed nisi. Donec
                nulla elit, commodo porttitor, semper eget, sagittis
                viverra, urna. Duis pretium dui facilisis turpis.
                Mauris vel arcu. Donec ut lorem vel lorem aliquet
                commodo. Donec sollicitudin mattis lacus. Ut non magna
                sit amet tortor viverra sagittis. Ut venenatis.
                Vestibulum sodales sapien scelerisque erat. Integer
                accumsan orci et tortor vulputate mollis. Curabitur
                lacinia quam id libero. Nulla eu lorem eget mi mattis
                tempus. Suspendisse consectetuer. Vivamus at risus.
                Aenean malesuada.

            </div>
            <div class="col_right">
                <h2>Column 2</h2>

                Morbi id nisi. Proin fringilla eleifend mi. Nunc eget
                elit. Nam ligula nibh, euismod blandit, nonummy eu,
                porta non, magna. Ut id nisi id metus consectetuer
                euismod. Vestibulum ante ipsum primis in faucibus orci
                luctus et ultrices posuere cubilia Curae; Mauris
                blandit ultrices eros. Fusce in nisl sit amet enim
                consequat tristique. Sed facilisis eros convallis magna.
                Pellentesque justo. Praesent nec libero at velit
                malesuada nonummy. Mauris vitae lectus eget elit
                euismod bibendum. Nulla nec ligula. Curabitur metus.
                Integer lectus nulla, iaculis molestie, venenatis non,
                suscipit commodo, est. Sed pulvinar, justo eu pulvinar
                convallis, mi tellus pellentesque elit, eu aliquet
                sapien ligula non mauris.

            </div>
        </div>
    </div>
    <div class="col_right">
        <div class="multicol2">
            <div class="col_left">
                <h2>Column 3</h2>

                Praesent eu risus. Fusce feugiat. Maecenas eget lacus
                quis nisi blandit porttitor. Pellentesque sed turpis.
                Nulla facilisi. Aenean convallis dolor eget elit. Donec
                elementum, pede nec euismod varius, ante diam elementum
                lectus, vitae iaculis orci libero quis tortor.
                Vestibulum justo est, laoreet eu, consequat sed,
                molestie at, mi. Fusce luctus, odio eu imperdiet
                viverra, nunc arcu gravida ante, iaculis lacinia tortor
                arcu ac felis. Quisque sagittis aliquam nisi. Aliquam
                nonummy. Nulla mattis orci vel nunc. Nunc in odio.
                Proin mi risus, lobortis ac, mollis vitae, lacinia
                vehicula, nulla. Nunc nibh. Morbi laoreet pellentesque
                justo. ent ultrices.

Spa

            </div>
            <div class="col_right">
                <h2>Column 4</h2>

                Nullam eget lectus. Aenean non augue auctor erat luctus
                fermentum. Quisque aliquam eros vel ligula. Mauris pede
                velit, mollis eget, adipiscing non, placerat nec, erat.
                Vestibulum vel sem non orci porttitor congue. Cras
                pretium eros eget dui. Donec gravida. Sed mattis
                tincidunt enim. Donec aliquam, quam eu rhoncus gravida,
                nibh nunc egestas nulla, lobortis interdum nisi dui id
                nisi. Praesent tristique velit sit amet ante. Nam
                malesuada, nisi in laoreet venenatis, dolor pede
                vehicula nunc, tempus accumsan ante purus eget sapien.
                Praesent aliquam, lorem sit amet volutpat faucibus,
                ligula lorem auctor diam, vitae vulputate pede ligula
                et leo.

            </div>
        </div>
    </div>
    <div class="col_foot">&nbsp;</div>
</div>
Column 1
Vestibulum tempor commodo mi. Integer sed nisi. Donec nulla elit, commodo porttitor, semper eget, sagittis viverra, urna. Duis pretium dui facilisis turpis. Mauris vel arcu. Donec ut lorem vel lorem aliquet commodo. Donec sollicitudin mattis lacus. Ut non magna sit amet tortor viverra sagittis. Ut venenatis. Vestibulum sodales sapien scelerisque erat. Integer accumsan orci et tortor vulputate mollis. Curabitur lacinia quam id libero. Nulla eu lorem eget mi mattis tempus. Suspendisse consectetuer. Vivamus at risus. Aenean malesuada.
Column 2
Morbi id nisi. Proin fringilla eleifend mi. Nunc eget elit. Nam ligula nibh, euismod blandit, nonummy eu, porta non, magna. Ut id nisi id metus consectetuer euismod. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Mauris blandit ultrices eros. Fusce in nisl sit amet enim consequat tristique. Sed facilisis eros convallis magna. Pellentesque justo. Praesent nec libero at velit malesuada nonummy. Mauris vitae lectus eget elit euismod bibendum. Nulla nec ligula. Curabitur metus. Integer lectus nulla, iaculis molestie, venenatis non, suscipit commodo, est. Sed pulvinar, justo eu pulvinar convallis, mi tellus pellentesque elit, eu aliquet sapien ligula non mauris.
Column 3
Praesent eu risus. Fusce feugiat. Maecenas eget lacus quis nisi blandit porttitor. Pellentesque sed turpis. Nulla facilisi. Aenean convallis dolor eget elit. Donec elementum, pede nec euismod varius, ante diam elementum lectus, vitae iaculis orci libero quis tortor. Vestibulum justo est, laoreet eu, consequat sed, molestie at, mi. Fusce luctus, odio eu imperdiet viverra, nunc arcu gravida ante, iaculis lacinia tortor arcu ac felis. Quisque sagittis aliquam nisi. Aliquam nonummy. Nulla mattis orci vel nunc. Nunc in odio. Proin mi risus, lobortis ac, mollis vitae, lacinia vehicula, nulla. Nunc nibh. Morbi laoreet pellentesque justo. ent ultrices. Spa
Column 4
Nullam eget lectus. Aenean non augue auctor erat luctus fermentum. Quisque aliquam eros vel ligula. Mauris pede velit, mollis eget, adipiscing non, placerat nec, erat. Vestibulum vel sem non orci porttitor congue. Cras pretium eros eget dui. Donec gravida. Sed mattis tincidunt enim. Donec aliquam, quam eu rhoncus gravida, nibh nunc egestas nulla, lobortis interdum nisi dui id nisi. Praesent tristique velit sit amet ante. Nam malesuada, nisi in laoreet venenatis, dolor pede vehicula nunc, tempus accumsan ante purus eget sapien. Praesent aliquam, lorem sit amet volutpat faucibus, ligula lorem auctor diam, vitae vulputate pede ligula et leo.
 
<< Graphics and photos Index Create tree menus >>

Author: Thomas Meyer, www.yanaframework.net