Child pages
  • FSS Columns - Flexible, unequal column widths

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.

Skip to end of metadata
Go to start of metadata

Error rendering macro 'html'

Your Confluence administrator has disallowed the use of Javascript in the HTML macro. This setting can be changed using HTML for Confluence Configuration. Please see your administrator for details.

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.

This is the first column, 40%.
Aliquam erat volutpat. Aliquam consequat, quam at varius tincidunt, nunc augue blandit sem, ac aliquam libero eros ac eros. Proin sed nibh lacus.
This is the second column, 60%.
Aenean urna erat, accumsan vel porttitor vitae, blandit a magna. Proin sed nibh lacus. Phasellus nec nisl eget purus laoreet fermentum. Mauris accumsan congue lectus a fringilla. Aliquam erat volutpat. Aliquam consequat, quam at varius tincidunt.

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>
  • No labels