Page Comparison

Equal-width

columns,

flexible-width

container

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} <div class="layout-demos"> <div class="fl-container-flex80 fl-centered"> <div class="fl-fix"> <h3>Equal-width columns in a flexible-width container</h3> <p>The container width is set at 80%, and the columns are equal width. Note how the column widths change if you resize the window.</p> </div> <div class="fl-col-flex3"> <div class="fl-col">This is the first column.<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">This is the second column.<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 class="fl-col">This is the third column.<br/>Suspendisse vehicula quam sit amet mi venenatis quis suscipit massa porttitor. Fusce ligula mauris, mollis ut placerat eu, interdum eu tellus. Vivamus posuere facilisis aliquet. Morbi justo nisl, auctor sed euismod quis, viverra at ligula. </div> </div> <div class="fl-push">Footer</div> </div> </div> {html}

The

mark-up

and

classes

used

to

produce

this

layout:

{code:html}

Code Block
html html
<div class="fl-container-flex80 fl-centered"> <div class="fl-fix"> <h3>Fixed-width columns in a fixed-width container</h3> <p>The container width is fixed at 700px, and the columns are divided equally.</p> </div> <div class="fl-col-flex3"> <div class="fl-col">This is the first column.<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">This is the second column.<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 class="fl-col">This is the third column.<br/>Suspendisse vehicula quam sit amet mi venenatis quis suscipit massa porttitor. Fusce ligula mauris, mollis ut placerat eu, interdum eu tellus. Vivamus posuere facilisis aliquet. Morbi justo nisl, auctor sed euismod quis, viverra at ligula. </div> </div> <div class="fl-push">Footer</div> </div> {code}