Aptuse Flex 100pc (Test)


Layout (Left To Right)

The examples here have an additional {.box} class (defined inline in this html page) is applied to highlight the individual "spanned" blocks.

To simplify the layouting process, the supporting push and pull classes for floating the blocks and the clearfix hack class have been defined inline within this html page.

Note: The supplemental classes defined in this html page are all avilable in the Aptuse base and Aptuse GUI Component projects

 

Regular touching blocks

A {.span-100pc}

 

B {.span-50pc .pull}
C {.span-50pc .push}

 

 

Spaced blocks -- using space, space-before, etc.

A {.span-100pc}

 

B {.span-30pc .pull}
C {.span-40pc .pull .space-before-5pc}
D {.span-20pc .push}

 

Padded and Spaced blocks -- using .pad, .pad-after, .space, .space-before, etc.

Note: in order to keep the dimensions/calculations consistent across the supported browsers, it is advisable to use spacing and padding classes on a separate div within the spandded div.

A {.span-100pc}

 

B {.span-20pc .pull .space-above-2pc}
C {.span-20pc .pull .space-4pc .pad-5pc}
D {.span-30pc .pull .space-before-4pc .space-after-4pc .pad-above-5pc}
E {.span-20pc .push .pad-before-4pc}