Replacing float left with inline-block seems to do the trick, although I would be sacrificing support in IE7 but this seems like the best option so far
here's a fork using floats and a clear after every 4th .box - of course early IE won't recognize this either, so I supplied a jquery workaround.
http://codepen.io/wolfcry911/pen/ahqtgv
Hi guys
I am having problems with forcing divs onto a new line, when using floats.
Here is my code pen http://codepen.io/joe/pen/rGKEy
As you can see, the 5th box is butting right up underneath the 4th box, rather than starting a new line.
I have tried clearing but this doesn't seem to work.
I want to avoid using min-height as the content will be provided dynamically.
Any help would be great.
Replacing float left with inline-block seems to do the trick, although I would be sacrificing support in IE7 but this seems like the best option so far
here's a fork using floats and a clear after every 4th .box - of course early IE won't recognize this either, so I supplied a jquery workaround. http://codepen.io/wolfcry911/pen/ahqtgv
here's slightly different approach you can maybe find useful for something: http://codepen.io/jiri/full/jwmKf