Overriding: Flexible, unequal column widthsThe 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. | Wiki Markup |
|---|
{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>
{html} |
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 |
|---|
|
<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>
|
|