Child pages
  • FSS Columns - Equal-width columns, fixed-width container

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

Equal-width columns, fixed-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.

Equal-width columns in a fixed-width container

The container width is fixed at 700px, and the columns are divided equally.

This is the first column.
Aliquam erat volutpat. Aliquam consequat, quam at varius tincidunt, nunc augue blandit sem, ac aliquam libero eros ac eros. Proin sed nibh lacus.
This is the second column.
Aenean urna erat, accumsan vel porttitor vitae, blandit a magna. Phasellus nec nisl eget purus laoreet fermentum. Mauris accumsan congue lectus a fringilla.
This is the third column.
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.
Footer

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

<div class="fl-container-700 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>
  • No labels