h2. Mixed-width columns, oneleft sidebar
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}
<div class="layout-demos">
<div class="fl-container-flex80 fl-centered fl-fix">
<div class="fl-fix">
<h3>Mixed-width columns, one sidebar</h3>
<p>One fixed-width column, forced to left; one flexible-width column.</p>
</div>
<div class="fl-col-mixed-200">
<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, ac aliquam libero eros ac eros. Proin sed nibh lacus.</div>
<div class="fl-col-flex">This is the second column, a flexible one.<br/>Aenean urna erat, accumsan vel porttitor vitae, blandit a magna. Phasellus nec nisl eget purus laoreet fermentum. Mauris accumsan congue lectus a fringilla.</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>
{html}
The mark-up and classes used to produce this layout:
{code:html}
<div class="fl-container-flex80 fl-centered fl-fix">
<div class="fl-fix">
<h3>Mixed-width columns, one sidebar</h3>
<p>One fixed-width column, forced to left; one flexible-width column.</p>
</div>
<div class="fl-col-mixed-200">
<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, ac aliquam libero eros ac eros. Proin sed nibh lacus.</div>
<div class="fl-col-flex">This is the second column, a flexible one.<br/>
Aenean urna erat, accumsan vel porttitor vitae, blandit a magna. Phasellus
nec nisl eget purus laoreet fermentum. Mauris accumsan congue lectus a fringilla.</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>
{code}
|