FSS Advanced Layout - Layout Fix

Layout Fix

A floating element within a container may not end up being 'contained' as the floating element's height might not be discernible by the container. Also when elements with their own margins (such as headers or paragraphs) are placed inside a container (such as a <div>), those margins will extend out beyond the boundaries of the container. These issues can be fixed by adding fl-fix or fl-clearfix to your container, to force it to contain its contents.

NOTE: In these examples, the background colours have been added to help the reader understand where the relevant regions are. They are not provided by FSS.

Without fl-fix

Ex. 1: Floating div inside a container

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

<div>
    No fix applied.
    <p class="fl-force-left"><strong>This text should be within the border.</strong>
    <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Pellentesque egestas risus malesuada sem consectetur eget congue massa ultricies.
    Ut dictum facilisis odio, nec rutrum diam ornare id. Integer eget placerat tellus.</p>
</div>

Ex. 2: Elements with margins extending outside of container

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

<div>
    <h2>The margin of this header actually extends above the top of the containing div.</h1>
    <p>The margin of this paragraph extends below the containing div.</p>
</div>

With fl-fix

Ex 1: Floating div inside a container

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

<div class="fl-fix">
    With fix applied.
    <p class="fl-force-left"><strong>This text should be within the border.</strong>
    <br />Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Pellentesque egestas risus malesuada sem consectetur eget congue massa ultricies.
    Ut dictum facilisis odio, nec rutrum diam ornare id. Integer eget placerat tellus.</p>
</div>

Ex. 2: Elements with margins extending outside of container

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

<div class="fl-fix">
    <h2>With fl-fix on the container, the container is made larger.</h1>
    <p>The container is now extended to properly encapsulate the margins of the contained elements.</p>
</div>

fl-fix vs. fl-clearfix

In some cases, fl-fix will cause scrollbars to appear around the container div - it happens when the width of the contents goes beyond the container's expected width. fl-clearfix will achieve the same result as fl-fix but without causing scrollbars.

Also in other cases, fl-clearfix will clear a div too far, for example if the container div lives within a column, it could be cleared below it's neighbouring column. In this instance, fl-fix will work best.