liser/build/liser.floats.css

functional css help to optimizing design work and building responsive websites

.fl { float: left; _display: inline; }
.fr { float: right; _display: inline; }
.fn { float: none; }
@media screen and (min-width: 30em) {
 .fl-ns { float: left; display: inline; }
 .fr-ns { float: right; display: inline; }
 .fn-ns { float: none; }
}
@media screen and (min-width: 30em) and (max-width: 60em) {
 .fl-m { float: left; display: inline; }
 .fr-m { float: right; display: inline; }
 .fn-m { float: none; }
}
@media screen and (max-width: 60em) and (orientation: landscape) {
 .fl-ml { float: left; display: inline; }
 .fr-ml { float: right; display: inline; }
 .fn-ml { float: none; }
}
@media screen and (min-width: 60em) {
 .fl-l { float: left; display: inline; }
 .fr-l { float: right; display: inline; }
 .fn-l { float: none; }
}