Page Comparison

Include Page

	docs:Styles for FSS examplesdocs:
	Styles for FSS examples

Section

Column

Include Page

	docs:FSS column examples navigationdocs:
	FSS column examples navigation

Include Page

	docs:FSS Links Paneldocs:
	FSS Links Panel

h2.

Overriding:

Flexible,

unequal

column

widths

The

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.

Column

Wiki Markup

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%;} {code}

The

mark-up

used

to

produce

this

layout:

{code:html}

Code Block

	html
	html

<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>
{code}

Versions Compared

Old Version 1

New Version 2

Key

Overriding:

Flexible,

unequal

column

widths