Equal-width columns, flexible-width container

Multi-column layouts very often look terrible on a small screen (like a mobile phone). As well, multi-column layouts can be difficult to read for users with low vision, or some cognitive impairments.

By using the FSS classes to create multi-column layouts, you will automatically be able to support linearization: converting multiple columns into a single column. The FSS offers a class – fl-layout-linear – that, when applied to the container of a multi-column layout, will automatically linearize it. The addition of the class can be carried out programmatically based on the context (e.g. identification of the user's device, or processing of a user's personal preferences). This way, the layout of your content can be customized when needed, without requiring you to sacrifice the multi-column layout for users who want it. The Infusion (Floe) UI Options (2008-2009) component provides an interface for users to express these kinds of interface preferences, and is designed to work with FSS.

NOTE: The background colours on this page have been added to help the reader recognize the different regions of the demo. They are not provided by the FSS.

<div class="layout-demos">
<div class="fl-container-flex80 fl-centered">
    <div class="fl-fix">
        <h3>Original three-column layout</h3>
    </div>
    <div class="fl-col-flex3">
        <div class="fl-col">
            <p>This is the first column.<br/>
               Aliquam erat volutpat. Aliquam consequat,
               quam at varius tincidunt.</p>
         </div>
        <div class="fl-col">
            <p>This is the second column.<br/>
               Aenean urna erat, accumsan vel porttitor
               vitae, blandit a magna. Phasellus
               nec nisl.</p>
        </div>
        <div class="fl-col">
            <p>This is the third column.<br/>
               Suspendisse vehicula quam sit
               amet mi venenatis quis suscipit
               massa porttitor.</p>
        </div>
    </div>
    <div class="fl-push">Footer</div>
</div>
</div>

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

<div class="fl-container-flex80 fl-centered">
    <div class="fl-fix">
        <h3>Original three-column layout</h3>
    </div>
    <div class="fl-col-flex3">
        <div class="fl-col">
            <p>This is the first column.<br/>
               Aliquam erat volutpat. Aliquam consequat,
               quam at varius tincidunt.</p>
         </div>
        <div class="fl-col">
            <p>This is the second column.<br/>
               Aenean urna erat, accumsan vel porttitor
               vitae, blandit a magna. Phasellus
               nec nisl.</p>
        </div>
        <div class="fl-col">
            <p>This is the third column.<br/>
               Suspendisse vehicula quam sit
               amet mi venenatis quis suscipit
               massa porttitor.</p>
        </div>
    </div>
    <div class="fl-push">Footer</div>
</div>

<div class="layout-demos">
<div class="fl-layout-linear fl-container-flex80 fl-centered">
    <div class="fl-fix">
        <h3>Linearized three-column layout</h3>
    </div>
    <div class="fl-col-flex3">
        <div class="fl-col">
            <p>This is the first column.<br/>
               Aliquam erat volutpat. Aliquam consequat,
               quam at varius tincidunt.</p>
         </div>
        <div class="fl-col">
            <p>This is the second column.<br/>
               Aenean urna erat, accumsan vel porttitor
               vitae, blandit a magna. Phasellus
               nec nisl.</p>
        </div>
        <div class="fl-col">
            <p>This is the third column.<br/>
               Suspendisse vehicula quam sit
               amet mi venenatis quis suscipit
               massa porttitor.</p>
        </div>
    </div>
    <div class="fl-push">Footer</div>
</div>
</div>

The mark-up and classes used to produce this layout (NOTE that the only difference is the addition of the fl-layout-linear class on the outer container <div>):

<div class="fl-layout-linear fl-container-flex80 fl-centered">
    <div class="fl-fix">
        <h3>Linearized three-column layout</h3>
    </div>
    <div class="fl-col-flex3">
        <div class="fl-col">
            <p>This is the first column.<br/>
               Aliquam erat volutpat. Aliquam consequat,
               quam at varius tincidunt.</p>
         </div>
        <div class="fl-col">
            <p>This is the second column.<br/>
               Aenean urna erat, accumsan vel porttitor
               vitae, blandit a magna. Phasellus
               nec nisl.</p>
        </div>
        <div class="fl-col">
            <p>This is the third column.<br/>
               Suspendisse vehicula quam sit
               amet mi venenatis quis suscipit
               massa porttitor.</p>
        </div>
    </div>
    <div class="fl-push">Footer</div>
</div>