Child pages
  • FSS Columns - Flexible, unequal column widths

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Include Page
Styles for FSS examples
Styles for FSS examples
Section
Column
Include Page
FSS column examples navigation
FSS column examples navigation
Include Page
FSS Links Panel
FSS Links Panel
Column

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.

HTML
<style>
.fl-col-mixed-2 .fl-col-flex-40 {width: 38%;}
.fl-col-mixed-2 .fl-col-flex-60 {width: 58%;}
</style>
<div class="layout-demos fl-fix">
<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/>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.</div>
    </div>
</div>
</div>

The custom classes created for this layout:

Code Block
.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:

Code Block
html
html
<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>