Search
Table of ContentsDeveloper's Manual
Graphics and photos Index Create tree menues

### Create multi-column layouts

#### General introduction

The Yana Framework provides pre-defined 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 multi-column boxes. The following example demonstrates how two 2-column layouts are nested to creaqte 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 menues

Thomas Meyer, www.yanaframework.net