This documentation is currently being moved to our new documentation site.

Please view or edit the documentation there, instead.

If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

FSS Columns - Nested columns

Owned by Anastasia Cheetham
Last updated: Apr 08, 2013Version comment
7 min read

NOTE: FSS is deprecated as of 1.5

All Columns Examples

Equal-width columns, fixed-width container

Equal-width columns, flexible-width container

Mixed-width columns, left sidebar

Mixed-width columns, right sidebar

Mixed-width columns, two sidebars

Nested columns

Linearization

Overriding: Flexible, unequal column widths


NOTE: FSS is deprecated as of 1.5
FSS Documentation

Fluid Skinning System - FSS
FSS Naming Conventions
FSS Cheat Sheet
Mobile FSS Cheat Sheet

Demos: Columns
Demos: Tabs, Menus, etc.
Demos: Text
Demos: Themes

HTML and CSS Background
CSS Bugs, Gotchas

Still need help?

Join the infusion-users mailing list and ask your questions there,
or hang out in our  IRC Channel.

Nested Columns

The mark-up and classes used to produce this layout:

<div id="nested-columns-demo" class="fl-container-850 fl-centered">
    <div class="fl-col-flex3">
        <div class="fl-col">
            <div class="fl-col-mixed-100">
                <div class="fl-col-fixed fl-force-left">
                    <img class="fl-force-right" src="../images/tablet.png" alt="a graphic of a computer tablet"/>
                </div>
                <div class="fl-col-flex">
                    <p>Technology</p>
                    <ul>
                        <li>Operating System</li>
                        <li>Accessibility</li>
                        <li>Assistive Technology</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fl-col">
            <div class="fl-col-mixed-100">
                <div class="fl-col-fixed fl-force-left">
                    <img class="fl-force-right" src="../images/lifesaver.png" alt="a graphic of a lifesaver"/>
                </div>
                <div class="fl-col-flex">
                    <p>Digital Documents For Everyone</p>
                    <ul>
                        <li>Accessible Digital Office Document</li>
                        <li>Alternative Format</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fl-col">
            <div class="fl-col-mixed-100">
                <div class="fl-col-fixed fl-force-left">
                    <img class="fl-force-right" src="../images/box.png" alt="a graphic of a box"/>
                </div>
                <div class="fl-col-flex">
                    <p>Workshops</p>
                    <ul>
                        <li>Workshop Description</li>
                        <li>Registration Info</li>
                        <li>About the Moderators</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

    <div class="fl-col-flex3">
        <div class="fl-col">
            <div class="fl-col-mixed-100">
                <div class="fl-col-fixed fl-force-left">
                    <img class="fl-force-right" src="../images/ball.png" alt="a graphic of blue globe"/>
                </div>
                <div class="fl-col-flex">
                    <p>Resources</p>
                    <ul>
                        <li>Learning Management</li>
                        <li>Student Information</li>
                        <li>Content Management</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fl-col">
            <div class="fl-col-mixed-100">
                <div class="fl-col-fixed fl-force-left">
                    <img class="fl-force-right" src="../images/list.png" alt="a graphic of checklist"/>
                </div>
                <div class="fl-col-flex">
                    <p>Websites for Everyone</p>
                    <ul>
                        <li>WCAG</li>
                        <li>Interaction Design</li>
                        <li>Tools</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="fl-col">
            <div class="fl-col-mixed-100">
                <div class="fl-col-fixed fl-force-left">
                    <img class="fl-force-right" src="../images/checkmark.png" alt="a graphic of note with a checkmark"/>
                </div>
                <div class="fl-col-flex">
                    <p>Legislation</p>
                    <ul>
                        <li>About AODA</li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>