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

FSS Columns - Nested columns

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>