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.

Overriding: Flexible, unequal column widths

The FSS does not support flexible, unequal column widths, but it is not difficult to create FSS-style classes to accomplish this. This examples shows styles which could be used to create two columns that are fixed at 40% and 60% of the container width. The size of gap between the columns can be tweaked by adjusting the actual % numbers in the styles.

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.

The custom classes created for this layout:

.fl-col-mixed-2 .fl-col-flex-40 {width: 38%;}
.fl-col-mixed-2 .fl-col-flex-60 {width: 58%;}

The mark-up used to produce this layout:

<div class="fl-container-flex80 fl-centered">
    <div class="fl-col-mixed-2">
        <div class="fl-col-flex-40 fl-force-left">This is the first column, 40%.<br/>
                Aliquam erat volutpat. Aliquam consequat, quam at varius tincidunt,
                nunc augue blandit sem, ac aliquam libero eros ac eros.
                Proin sed nibh lacus.</div>
        <div class="fl-col-flex-60 fl-force-right">This is the second column, 60%.<br/>
                Aliquam erat volutpat. Aliquam consequat, quam at varius tincidunt,
                nunc augue blandit sem, ac aliquam libero eros ac eros.
                Proin sed nibh lacus.</div>
    </div>
</div>

Browser not supported