Mixed-width columns, two sidebars

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.

<div class="layout-demos">
<div class="fl-container-flex80 fl-centered fl-fix">
    <div class="fl-fix">
        <h3>Mixed-width columns, two sidebars</h3>
        <p>Two fixed-width columns, forced to left and right; one flexible-width colum in the middle.</p>
    </div>
    <div class="fl-col-mixed-100">
        <div class="fl-col-fixed fl-force-left">This is the first column, forced left.<br/>Aliquam erat volutpat. Aliquam consequat, quam at varius tincidunt, nunc augue blandit sem.</div>
        <div class="fl-col-fixed fl-force-right">This is the second column, forced right.<br/>Aenean urna erat, accumsan vel porttitor vitae, blandit a magna.</div>
        <div class="fl-col-flex">This is the third column, the flexible one.<br/>It is listed after the forced-alignment columns. Suspendisse vehicula quam sit amet mi venenatis quis suscipit massa porttitor.</div>
    </div>
    <!-- fl-push forces the element onto a line of its own, and not next to floating things before it -->
    <div class="fl-push">Footer</div>
</div>
</div>

The mark-up and classes used to produce this layout:

<div class="fl-container-flex80 fl-centered fl-fix">
    <div class="fl-fix">
        <h3>Mixed-width columns, two sidebars</h3>
        <p>Two fixed-width columns, forced to left and right; one flexible-width colum in the middle.</p>
    </div>
    <div class="fl-col-mixed-100">
        <div class="fl-col-fixed fl-force-left">This is the first column, forced left.<br/>
          Aliquam erat volutpat. Aliquam consequat, quam at varius tincidunt,
          nunc augue blandit sem.</div>
        <div class="fl-col-fixed fl-force-right">This is the second column, forced right.
          <br/>Aenean urna erat, accumsan vel porttitor vitae, blandit a magna.</div>
        <div class="fl-col-flex">This is the third column, the flexible one.<br/>
          It is listed after the forced-alignment columns. Suspendisse vehicula quam
          sit amet mi venenatis quis suscipit massa porttitor.</div>
    </div>
    <!-- fl-push forces the element onto a line of its own, and not next to floating things before it -->
    <div class="fl-push">Footer</div>
</div>