FSS Columns - Flexible, unequal column widths
- Anastasia Cheetham
Owned by Anastasia Cheetham
All Columns Examples |
|---|
FSS Documentation
Still need help?
Join the infusion-users mailing list and ask your questions there.
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>