CSS Float Based Layout System
Clone or download
vladocar Merge pull request #1 from unkn0w/patch-1
Updated typo in class .p70
Latest commit c9ee2a8 Dec 12, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore First commit Dec 9, 2018
LICENSE Initial commit Dec 9, 2018
README.md Update README.md Dec 9, 2018
floaty.css Updated typo in class .p70 Dec 12, 2018
floaty.svg First commit Dec 9, 2018
index.html Update index.html Dec 10, 2018
logo.png First commit Dec 9, 2018
package.json First commit Dec 9, 2018


Gzip Size


Solution for all the web designers who need to support the older browsers.

Floaty is 0,6 Kb(0,35 Kb gzip) CSS layout solution with basic responsive layout and will work even in the older browsers.

I made 5 CSS layout solutions based on Flex and CSS GRID (SMART CSS GRID, 60 GS, Flexy, Katana, Flex One) this year and most common question is: will it work in IE. The answers is: not always.

Floats were never meant to be used as layout solution but I think still 90% of all the web uses floats probably of the simplicity, fear of browser un-compatibility and web designers / developers need to learn more complex layout systems like Flex or CSS Grid.

With floats you can go left or right, anyone can learn that.

Flex and CSS Grid are first real layout solutions and if possible we should always push the web forward.

But if for some reason you still want to "go with the float", this solution may help you.


Just simply download the project or:

$ npm i floatycss
<link rel="stylesheet" href="https://unpkg.com/floatycss@1.0.0/floaty.css">

Demo: https://vladocar.github.io/floaty/


This project is licensed under the MIT License