The Lodge is members-only design/dev videos and Office Hours.

Next Office Hours Session: "Implementing an SVG Icon System" Nov 30 - 6:00 PM Eastern

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]( “”) 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]( “”) 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


    # February 5, 2013 at 9:37 am

    This reply has been reported for inappropriate content.

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

    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.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed