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 Elements and Fluid Dynamic Height Layouts

  • # October 1, 2012 at 10:04 pm

    Alright, so in order for this to make any sense, click [this link for an image]( “Image”) to get a sense of what I’m talking about.

    Basically this is for my portfolio page, which at the moment I’m trying to compact into a smaller more efficient layout, where people don’t have to keep scrolling and scrolling to get to what they want. I’m trying to work out how to float my bite-sized portfolio items so that they fall neatly into columns, but can still have differing heights as indicated by the image above, as I don’t really have a set length for each “post excerpt”. Ideas on how I can get everything to line up?

    # October 1, 2012 at 11:07 pm

    I believe this is what you’ll need

    # October 1, 2012 at 11:19 pm

    First, can you it so people can work with it.

    Second, get rid of the height property to make the height dynamic for each box.

    Third, if you make 3 columns with divs and give them:

    vertical-align: top;

    You can get each to come immediately after each other.

    # October 2, 2012 at 5:57 pm

    Thanks for the tips! I’ll try these out and let you know what I come up with. It might also go on Codepen.

Viewing 4 posts - 1 through 4 (of 4 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