Compass Float
This module provides mixins that help you work around the double-margin bug in IE5/6.
This file can be imported using:
@import "compass/utilities/general/float"
Imports
- Browser Support – Provides configuration options for the Compass Browser Support Matrix.
Configurable Variables help
$legacy-float-support-threshold
$critical-usage-threshold
The legacy support threshold for float. Defaults to the $critical-usage-threshold.
Mixins
view sourcefloat-left
=float-left +float(left)
@mixin float-left { @include float(left); }
Implementation of float:left with fix for the double-margin bug in IE5/6
float-right
=float-right +float(right)
@mixin float-right { @include float(right); }
Implementation of float:right with fix for the double-margin bug in IE5/6
float($side)
=float($side: left) float: unquote($side) @if support-legacy-browser("ie", "6", $threshold: $legacy-float-support-threshold) display: inline
@mixin float($side: left) { float: unquote($side); @if support-legacy-browser("ie", "6", $threshold: $legacy-float-support-threshold) { display: inline; } }
Direction independent float mixin that fixes the double-margin bug in IE5/6
reset-float($display)
=reset-float($display: block) float: none @if support-legacy-browser("ie", "6", $threshold: $legacy-float-support-threshold) display: $display
@mixin reset-float($display: block) { float: none; @if support-legacy-browser("ie", "6", $threshold: $legacy-float-support-threshold) { display: $display; } }
Resets floated elements back to their default of float: none
and defaults
to display: block
unless you pass inline
as an argument
Usage Example:
body.homepage
#footer li
+float-left
body.signup
#footer li
+reset-float