Versions Compared

Old Version 1

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version 2

changes.mady.by.user Anastasia Cheetham

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0
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.

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.


Column
Wiki Markup
Wiki Markup
{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}
 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}