Versions Compared

Old Version 12

changes.mady.by.user heidi valles

Saved on

compared with

New Version Current

changes.mady.by.user heidi valles

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 5.3

...

{html} <div class="fix-demo"> <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> </div> {html}

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

Section
Column
Include Page
FSS advanced layout examples navigation
FSS advanced layout examples navigation
Include Page
FSS Links Panel
FSS Links Panel
{html} <div class="fix-demo"> <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> <div class="fl-push"></div> </div> {html}

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

Column

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

Wiki Markup
{html}
<div class="fix-demo">
<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>
<div class="fl-push"></div>
</div>
{html}

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

Code Block
html
html
<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

Wiki Markup
{html}
<div class="fix-demo">
<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>
</div>
{html}

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

Code Block
html
html
<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

Wiki Markup
Code Block
html
html
<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

Wiki Markup
Code Block
html
html
<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.