Grow your CSS skills. Land your dream job.

Floating DIVs/LIs with uneven heights

  • # February 5, 2013 at 9:34 am

    Hello :)

    I’ve come up with a little problem… here’s [a link to CodePen](http://codepen.io/Drift/pen/kpArD “”) which will show you what I’m dealing with at the moment.
    As you can see, the 4th red box shifts up and under the 3rd one, creating an unintended effect.
    Now if you reduce the width of class _.block_ to 920px, the first 6 _li’s_ will align perfectly regardless the height of the content, but this is not how I want to deal with this problem.
    Now I recall seeing a little CSS snippet that dealt with a [similar problem](http://codepen.io/Drift/pen/vrEgy “”) which (most probably) had undefined width in the parent element and variable heights of the child elements. I looked for this snippet (which I thought was here) but couldn’t find it.

    If anyone out there has a solution for this, I’d be really glad :D

    Thanks.

    # February 5, 2013 at 9:37 am

    @DriftingSteps, don’t float, use `display: inline-block`

    http://codepen.io/ChrisPlz/pen/nfiAD

    Is that what you were looking for?

    # February 5, 2013 at 9:46 am

    Wow, this is exactly what I was looking for:D Thank a lot @ChrisP, much appreciated!

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

You must be logged in to reply to this topic.

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