As you can see, even with the very tall column, the next row still breaks clearly below this one.
I’ve tested across a few different browsers and it seems to work just as well as the float version, but solving this issue. Wondering if anyone else can see any issues, or maybe has some other suggestions/ideas?
For the same reason you mention (elements wrapping to next row nicely even when they are unequal heights) I’m using inline-blocks as my main layout tool too. It avoids the need of needing row wrappers so the markup stays clean as well. The only issue I can see might be the way you eliminate the space between columns, will that work with any font or do you need to tweak the number?
That’s something I need to test more thoroughly, I found this solution after an extensive google search, not too much out there about addressing this issue. Do you have any other ideas/suggestions in that area?
I’m also looking to add a simple (“simple” is the key to what I want for this) typography framework to this at some stage, have found http://typeplate.com which looks okay, any suggestions in this area?
> And I will have to do some more testing about the whole “row” div thing, as you say for some layouts it wouldn’t be necessary at all.
I would even say for most layouts it wouldn’t be necessary. You can set the negative letter-spacing on any parent (and reset it back to normal on any sibling).
I don’t know about typography but something that generates some nice vertical rhythm and typographic scale would be nice, not much more than that. Maybe some default optimizations like `text-rendering: optimizeLegibility;` and `-webkit-font-smoothing: antialiased;`.
I wouldn’t say “most”. Think of a 2 column layout, main column plus sidebar. That main column may have multiple columns itself, which would have to be inside some sort of wrapper in case it was longer than the sidebar. I think this kind of layout is pretty common.
And thanks TheDoc, though this is working in ie8 and above, and not too fussed about supporting under that (but can’t hurt to add one line perhaps).