responsive grid frameworks - float: vs display: table-cell
css, html, twitter-bootstrap, zurb-foundation
Solution
There are roughly 3 ways to make grid systems: `float` `inline-block` `table-cell`
They all have PROs and CONs. Bootstrap probably uses `float` because, being a framework, it adapts easily to different scenarios.
A big limit of the `float` method is that you can't vertically align grid elements, and personally I prefer using the `inline-block` method.
However, the `inline-block` method brings a problem of whitespace (because the grid items become kind of words) which can be fixed in various ways, as extensively explained by Chris Coyier:
http://css-tricks.com/fighting-the-space-between-inline-block-elements/
The biggest problem with the `table-cell` method is, in my opinion, that you can only place grid elements in one row because you can't push them on a new line via CSS. This means that for each row you need a new container element, and it becomes very inflexible for responsive designs.
Problem
I've used Bootstrap, and researched Foundation. From what I've seen, both of them use `float:` to achieve responsive grids. I've also seen responsive grids using only `display: table-cell` and `@media` queries. The latter seems better to me because `float:` is intended to achieve a particular typographical effect, so using it to achieve responsive grid layout seems like a hack. My question: is `float:` used by bootstrap, foundation and other responsive grids to get around the lack of proper `table-cell` support in older browsers? If there is another reason, I'd like to hear that too.