Force unequal height divs onto new row

[croydon86]

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.

[croydon86]

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

[wolfcry911]

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

[Author]

Posts