/
FSS Columns - Nested columns

Documentation for a historical release of Infusion: 1.4
Please view the Infusion Documentation site for the latest documentation, or the Infusion 1.3. Documentation for the previous release.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

FSS Columns - Nested columns

Apr 08, 2013

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
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.

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>