Child pages
  • FSS Columns - Mixed-width columns, left sidebar

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3
Include Page
Styles for FSS examples
Styles for FSS examples
Section
Column
Include Page
FSS column examples navigation
FSS column examples navigation
Include Page
FSS Links Panel
FSS Links Panel
Column

Mixed-width columns, left 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>

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 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>