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

  • This topic is empty.
Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
  • #41527

    Hi guys

    I am having problems with forcing divs onto a new line, when using floats.

    Here is my code pen

    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.

Viewing 3 posts - 1 through 3 (of 3 total)
  • The forum ‘CSS’ is closed to new topics and replies.