Versions Compared

Old Version 11

changes.mady.by.user heidi valles

Saved on

compared with

New Version 12

changes.mady.by.user heidi valles

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Comment: Migrated to Confluence 4.0
Include Page
Infusion13:Styles for FSS examplesInfusion13:
Styles for FSS examples
Section
Column
Include Page
Infusion13:FSS advanced layout examples navigationInfusion13:
FSS advanced layout examples navigation
Include Page
Infusion13:FSS Links PanelInfusion13:
FSS Links Panel
unmigrated-wiki-markup
Column
h2.

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.

h3. Without {{

Without fl-fix

}} h4.

Ex.

1:

Floating

div

inside

a

container

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:html}
 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>
{code}

h4. 
Ex. 
 
 2: 
 
 Elements 
 
 with 
 
 margins 
 
 extending 
 
 outside 
 
 of 
 container



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:html}
 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>
{code}

h3. With {{
With fl-fix
}}

h4. Ex 
Ex 1: 
 
 Floating 
 
 div 
 
 inside 
 
 a 
 container


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:html}
 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>
{code}

h4. 
Ex. 
 
 2: 
 
 Elements 
 
 with 
 
 margins 
 
 extending 
 
 outside 
 
 of 
 container



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:html}
 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>
{code}

h3. 
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.