Layout FixA 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-fixEx. 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 |
|---|
|
<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 |
|---|
|
<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-fixEx 1: Floating div inside a container| Wiki Markup |
|---|
{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: | Code Block |
|---|
|
<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 |
|---|
{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: | Code Block |
|---|
|
<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-clearfixIn 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. |