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