Child pages
  • FSS Columns - Mixed-width columns, two sidebars

Documentation for a historical release of Infusion: 1.3
Please view the Infusion Documentation site for the latest documentation.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

Skip to end of metadata
Go to start of metadata

Error rendering macro 'html'

Your Confluence administrator has disallowed the use of Javascript in the HTML macro. This setting can be changed using HTML for Confluence Configuration. Please see your administrator for details.

Mixed-width columns, two sidebars

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.

Mixed-width columns, two sidebars

Two fixed-width columns, forced to left and right; one flexible-width colum in the middle.

This is the first column, forced left.
Aliquam erat volutpat. Aliquam consequat, quam at varius tincidunt, nunc augue blandit sem.
This is the second column, forced right.
Aenean urna erat, accumsan vel porttitor vitae, blandit a magna.
This is the third column, the flexible one.
It is listed after the forced-alignment columns. Suspendisse vehicula quam sit amet mi venenatis quis suscipit massa porttitor.
Footer

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

<div class="fl-container-flex80 fl-centered fl-fix">
    <div class="fl-fix">
        <h3>Mixed-width columns, two sidebars</h3>
        <p>Two fixed-width columns, forced to left and right; one flexible-width colum in the middle.</p>
    </div>
    <div class="fl-col-mixed-100">
        <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.</div>
        <div class="fl-col-fixed fl-force-right">This is the second column, forced right.
          <br/>Aenean urna erat, accumsan vel porttitor vitae, blandit a magna.</div>
        <div class="fl-col-flex">This is the third column, the flexible one.<br/>
          It is listed after the forced-alignment columns. Suspendisse vehicula quam
          sit amet mi venenatis quis suscipit massa porttitor.</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>
  • No labels