Page Comparison

Mixed-width

columns,

right

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 right; one flexible-width column.</p> </div> <div class="fl-col-mixed-200"> <div class="fl-col-fixed fl-force-right">This is the first column, forced right.<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-left">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}

FSS.

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

Code Block
html 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 right; one flexible-width column.</p> </div> <div class="fl-col-mixed-200"> <div class="fl-col-fixed fl-force-right">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-left">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}