liser/src/modules/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;
  }
}