The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Home › Forums › CSS › Force unequal height divs onto new row
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.