Grow your CSS skills. Land your dream job.

Force unequal height divs onto new row

  • # December 22, 2012 at 8:40 am

    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.

    # December 22, 2012 at 8:45 am

    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

    # December 22, 2012 at 11:16 am

    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

    # December 22, 2012 at 11:36 am

    here’s slightly different approach you can maybe find useful for something: http://codepen.io/jiri/full/jwmKf

Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".